jQuery - 클래스의 요소에서 속성 값 목록을 가져옵니다.

jQuery - 클래스의 요소에서 속성 값 목록을 가져옵니다.

수업이 있습니다..object라는 속성을 가지고 있습니다.level나는 모든 다른 가치들의 목록을 얻고 싶습니다.level페이지에서 가장 높은 것을 선택할 수 있습니다.

다음과 같은 작업을 수행할 경우:

$(".object").attr("level")

그러면 레벨 속성의 값인 값 목록을 얻을 수 있습니까?아닌 것 같은데, 그럼 어떻게 그런 일을 하죠?

참고: 일반적으로 HTML 개체를 선택하는 것이 아니라 속성 값을 선택합니다.

편집: 가장 높은 "수준"을 얻기 위해 이 작업을 수행했지만 효과가 없는 것 같습니다.저는 지금 제안된 다른 방법을 시도해 보겠습니다.

var highLevel=0;
$.each(".object[level]", function(i, value) {
   if (value>highLevel) {
       highLevel=value;
   }
});

alert(highLevel);

$(".object").attr("level")첫 번째의 속성만 반환합니다..object원소의

이것은 당신에게 모든 것의 배열을 줄 것입니다.levels:

var list = $(".object").map(function(){return $(this).attr("level");}).get();

질문의 첫 번째 부분은 속성 값을 배열로 가져오는 것입니다.이 질문 보기

jQuery는 목록에서 img 소스 특성을 가져와 배열로 푸시합니다.

라고 말할 것입니다.

var levelArray = $('.object').map( function() {
    return $(this).attr('level');
}).get();

질문의 두 번째 부분은 이 기술을 사용하여 가장 높은 값을 얻을 수 있습니다.

var maxValue = Math.max.apply( Math, levelArray );

<script type="text/javascript"> 
var max = 0;
jQuery(document).ready(function(){ 
    jQuery('.object[level]').each(function(){
        var num = parseInt($(this).attr('level'), 10);
        if (num > max) { max = num; }
    });
    alert(max);
});
</script>

저는 다음과 같은 마크업을 가정합니다.

<div class="object" level="1">placeholder</div>
<div class="object" level="10">placeholder</div>
<div class="object" level="20">placeholder</div>
<div class="object" level="1000">placeholder</div>
<div class="object" level="40">placeholder</div>
<div class="object" level="3">placeholder</div>
<div class="object" level="5">placeholder</div>

내 코드에 대해 "1000" 경고가 표시됩니다.

harpo, lomaxx 및 Kobi의 다른 응답 중 몇 가지를 결합한 다른 솔루션이 있습니다.

jQuery(document).ready(function(){ 
    var list = $(".object[level]").map(function(){
        return parseInt($(this).attr("level"), 10);
    }).get();
    var max = Math.max.apply( Math, list ); 
    alert(max);
});

선택자

$(".object[level]")

클래스와 함께 모든 돔 요소를 제공할 것입니다.object그리고 속성.level.

그런 다음 .each() 메서드를 사용하여 요소를 반복하여 가장 높은 값을 얻을 수 있습니다.

Jquery의 기능을 확장하고 자신만의 'attrs' 구현을 추가할 수 있습니다.

다음 줄의 코드를 JavaScript 파일에 추가합니다.

jQuery.fn.extend({
    attrs: function (attributeName) {
        var results = [];
        $.each(this, function (i, item) {
            results.push(item.getAttribute(attributeName));
        });
        return results;
    }
});

이제 다음을 호출하여 수준 값 목록을 얻을 수 있습니다.

$(".object").attrs("level")

jQuery 유틸리티$.map()값 배열을 반환하는 보다 깨끗한 접근 방식을 제공합니다.

let arr = $.map($('.object'), x => $(x).data('level'));

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
  <li class="object" data-level="1">HTML5 technically does not require closing li tags</li>
  <li class="object" data-level="2">The Tidy function in SO code snippets do</li>
  <li class="object" data-level="3">*shrug*</li>
</ol>

언급URL : https://stackoverflow.com/questions/2754021/jquery-get-a-list-of-values-of-an-attribute-from-elements-of-a-class