jQuery의 순회 기능에 대한 간략한 설명-JS 튜토리얼-php.cn

이 글에서는 jQuery의 순회 기능을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

jQuery의 순회 기능에 대한 간략한 설명

jQuery 순회 함수

jQuery 순회 함수에는 요소 필터링, 찾기 및 연결을 위한 메소드가 포함되어 있습니다.

Function	Description
.add()	일치하는 요소 컬렉션에 요소를 추가합니다.
.andSelf()	스택의 이전 요소 세트를 현재 세트에 추가합니다.
.children()	일치하는 요소 집합에서 각 요소의 모든 하위 요소를 가져옵니다.
.closest()	요소 자체에서 시작하여 단계별로 상위 요소를 일치시키고 첫 번째로 일치하는 상위 요소를 반환합니다.
.contents()	텍스트 및 주석 노드를 포함하여 일치하는 요소 집합에서 각 요소의 하위 요소를 가져옵니다.
.each()	jQuery 객체를 반복하여 일치하는 각 요소에 대해 함수를 실행합니다.
.end()	는 현재 체인에서 가장 최근의 필터링 작업을 종료하고 일치하는 요소 집합을 이전 상태로 반환합니다.
.eq()	일치하는 요소 집합을 지정된 인덱스의 새 요소로 줄입니다.
.filter()	일치하는 요소 집합을 선택기 또는 일치 함수의 반환 값과 일치하는 새 요소로 줄입니다.
.find()	현재 일치하는 요소 집합에서 선택기로 필터링된 각 요소의 하위 항목을 가져옵니다.
.first()	일치하는 요소 집합을 집합의 첫 번째 요소로 줄입니다.
.has()	일치하는 요소 집합을 특정 요소의 자손을 포함하는 집합으로 줄입니다.
.is()	선택기를 기반으로 현재 일치하는 요소 집합을 확인하고 일치하는 요소가 하나 이상 있으면 true를 반환합니다.
.last()	일치하는 요소 집합을 집합의 마지막 요소로 줄입니다.
.map()	은 현재 일치하는 집합의 각 요소를 함수에 전달하고 반환 값을 포함하는 새 jQuery 개체를 생성합니다.
.next()	일치하는 요소 집합의 각 요소에 바로 인접한 형제 요소를 가져옵니다.
.nextAll()	선택기로 필터링하여 일치하는 요소 집합의 각 요소 뒤에 있는 모든 형제 요소를 가져옵니다(선택 사항).
.nextUntil()	선택기와 일치하는 요소가 발견될 때까지 각 요소 뒤에 있는 모든 형제 요소를 가져옵니다.
.not()	일치하는 요소 집합에서 요소를 제거합니다.
.offsetParent()	위치 지정을 위한 첫 번째 상위 요소를 가져옵니다.
.parent()	현재 일치하는 요소 집합에서 각 요소의 상위 요소를 가져오고 선택기로 필터링합니다(선택 사항).
.parents()	선택기로 필터링된 현재 일치 요소 집합에 있는 각 요소의 상위 요소를 가져옵니다(선택 사항).
.parentsUntil()	선택기와 일치하는 요소가 발견될 때까지 현재 일치하는 요소 집합에 있는 각 요소의 상위 요소를 가져옵니다.
.prev()	선택기로 필터링된 일치 요소 집합의 각 요소 바로 앞에 있는 형제 요소를 가져옵니다(선택 사항).
.prevAll()	선택기로 필터링된 일치하는 요소 집합의 각 요소 앞에 있는 모든 형제 요소를 가져옵니다(선택 사항).
.prevUntil()	선택기와 일치하는 요소가 발견될 때까지 각 요소 앞에 있는 모든 형제 요소를 가져옵니다.
.siblings()	선택기로 필터링하여 일치하는 요소 집합에 있는 모든 요소의 형제 요소를 가져옵니다(선택 사항).
.slice()	일치하는 요소 집합을 지정된 범위의 하위 집합으로 줄입니다.

각각의 사용법

1. 배열의 각

复制代码

 var arr = [ "one", "two", "three", "four"];     
 $.each(arr, function(){     
    alert(this);     
 });   
//上面这个each输出的结果分别为：one,two,three,four    
    
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
$.each(arr1, function(i, item){     
   alert(item[0]);     
});     
//其实arr1为一个二维数组，item相当于取每一个一维数组，   
//item[0]相对于取每一个一维数组里的第一个值   
//所以上面这个each输出分别为：1   4   7     
  
  
var obj = { one:1, two:2, three:3, four:4};     
$.each(obj, function(i) {     
    alert(obj[i]);           
});   
//这个each就有更厉害了，能循环每一个属性     
//输出结果为：1   2  3  4

로그인 후 복사

2. Dom 요소의

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

로그인 후 복사

을 탐색하여 커피, 우유, 소다를 차례로 팝업합니다

3.각각과 지도 비교

다음 예는 각 멀티박스의 ID 값을 가져오는 것입니다.

각 방법:

빈 배열을 정의하고 배열에 ID 값을 추가합니다. 마지막으로 배열을 문자열로 변환한 후 이 값을 경고합니다.

this.id를 자동으로 반환하는 확인란을 실행합니다. jQuery 객체로 가져온 다음 get 메소드를 사용하여 네이티브 Javascript 배열로 변환한 다음 Join 메소드를 사용하여 문자열로 변환하고 마지막으로 값이 경고됩니다.

$(function(){
    var arr = [];
    $(":checkbox").each(function(index){
        arr.push(this.id);
    });
    var str = arr.join(",");
    alert(str);
})

로그인 후 복사

배열 값이 필요할 때; 지도 방식을 사용하면 매우 편리합니다.

4. 요소 인덱스와 콘텐츠를 모두 사용하여 jquery에서 Each

를 사용하여 배열을 탐색합니다. (i는 인덱스, n은 내용) 코드는 다음과 같습니다.

$(function(){
    var str = $(":checkbox").map(function() {
        return this.id;
    }).get().join();    
    alert(str);
})

로그인 후 복사

멤버 이름과 변수 내용을 모두 사용하여 객체를 예시합니다. (i는 멤버 이름, n은 변수 내용)

코드는 다음과 같습니다.

$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});

로그인 후 복사

dom 요소 순회 예, 여기서는 입력 양식 요소를 예로 사용합니다.

돔에 이와 같은 코드가 있는 경우

$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});

로그인 후 복사

그런 다음 각각을 다음과 같이 사용합니다.

코드는 다음과 같습니다.

<input name="aaa" type="hidden" value="111" /> 
<input name="bbb" type="hidden" value="222" /> 
<input name="ccc" type="hidden" value="333" /> 
<input name="ddd" type="hidden" value="444"/>

로그인 후 복사

5.each는 이를 기반으로 요소를 찾습니다.

"답장" 효과를 얻으려면 두 가지 단어는 마우스가 그 위에 지나갈 때만 표시됩니다

$.each($("input:hidden"), function(i,val){
alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i); //输出索引为0，1，2，3
alert(val.name); //输出name的值
alert(val.value); //输出value的值
});

로그인 후 복사

js 코드는 다음과 같습니다

<ol class="commentlist">
    <li class="comment">
        <div class="comment-body">
          <p>嗨，第一层评论</p>
          <div class="reply">
            <a href="#" class=".comment-reply-link">回复</a>
          </div>
        </div>
        <ul class="children">
          <li class="comment">
            <div class="comment-body">
            <p>第二层评论</p>
            <div class="reply">
              <a href="#" class=".comment-reply-link">回复</a>
            </div>
          </div></li>
        </ul>
    </li>
</ol>

로그인 후 복사

효과를 얻으려면 참과 거짓 질문에 대한 선택 사항이 있는지 확인하세요

html

$("div.reply").hover(function(){
  $(this).find(".comment-reply-link").show();
},function(){
  $(this).find(".comment-reply-link").hide();
});

로그인 후 복사

js code

<ul id="ulSingle">
    
            <li class="liStyle">
                1.  阿斯顿按时<label id="selectTips" style="display: none" class="fillTims">请选择</label>
                <!--begin选项-->
                <ul>
                    
                            <li class="liStyle2">
                                <span id="repSingle_repSingleChoices_0_labOption_0">A         </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl00$hidID" id="repSingle_repSingleChoices_0_hidID_0" value="1" />
                                <input id="repSingle_repSingleChoices_0_cheSingleChoice_0" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice" /></li>
                        
                            <li class="liStyle2">
                                <span id="repSingle_repSingleChoices_0_labOption_1">B         </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl01$hidID" id="repSingle_repSingleChoices_0_hidID_1" value="2" />
                                <input id="repSingle_repSingleChoices_0_cheSingleChoice_1" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice" /></li>
                        
                            <li class="liStyle2">
                                <span id="repSingle_repSingleChoices_0_labOption_2">C         </span>.阿斯顿<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl02$hidID" id="repSingle_repSingleChoices_0_hidID_2" value="3" />
                                <input id="repSingle_repSingleChoices_0_cheSingleChoice_2" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice" /></li>
                        
                </ul>
                <!--end选项-->
                <br />
            </li>
        
</ul>

로그인 후 복사

ps: 전설적인 attr("property", "value"); 일부 브라우저에서 작동하지 않으면 prop을 사용하면 됩니다. (this).find("ul>li>:checkbox:eq(" + i + ")").is(" :checked");

6. 공식 설명

다음은 공식 설명입니다. :

//验证单选题是否选中
        $("ul#ulSingle>li.liStyle").each(function (index) {
            //选项个数
            var count = $(this).find("ul>li>:checkbox").length;
            var selectedCount = 0
            for (var i = 0; i < count; i++) {
                if ($(this).find("ul>li>:checkbox:eq(" + i + ")").attr("checked")) {
                    selectedCount++;
                    break;
                }
            }
            if (selectedCount == 0) {
                $(this).find("label#selectTips").show();
                return false;
            }
            else {
                $(this).find("label#selectTips").hide();
            }
        })

로그인 후 복사

개요

객체와 배열을 반복하는 데 사용할 수 있는 일반적인 반복 방법입니다.

jQuery 객체를 반복하는 $().each() 메서드와 달리 이 메서드는 모든 객체를 반복하는 데 사용할 수 있습니다. 콜백 함수에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 객체의 멤버 또는 배열의 인덱스이고 두 번째 매개변수는 해당 변수 또는 콘텐츠입니다. 각 루프를 종료해야 하는 경우 콜백 함수가 false를 반환하도록 하면 다른 반환 값은 무시됩니다.

Parameters

objectObject: 순회해야 하는 개체 또는 배열입니다.

callback (선택)함수: 각 멤버/요소에 의해 실행되는 콜백 함수입니다.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오
를 방문하세요! !

위 내용은 jQuery의 순회 기능에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!