jQuery에서 순회 기능을 사용하는 방법
- 迷茫원래의
- 2017-01-23 14:29:261071검색
jQuery 순회 함수에는 요소 필터링, 찾기 및 연결을 위한 메서드가 포함됩니다.
함수 설명
.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 4Dom의 순회
요소3. 각각과 맵의 비교
다음 예는 각 멀티박스의 ID 값을 얻는 것입니다.
빈 배열을 정의하고 각 메소드를 통해 배열에 ID 값을 추가한 후 마지막으로 배열을 문자열로 변환한 후 값을 경고합니다. >map 메소드:
각 :checkbox를 실행하여 this.id를 반환하고 이러한 반환 값을 jQuery 객체로 자동 저장한 다음 get 메소드를 사용하여 네이티브 자바스크립트 배열로 변환한 다음 조인 메소드를 사용하여 문자열로 변환하고 마지막으로 값을 경고합니다.
<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>
依次弹出Coffee，Milk，Soda배열 값이 필요한 경우 맵 메소드를 사용하면 매우 편리합니다.
4. jquery에서 각
을 사용하여 요소 인덱스와 콘텐츠를 모두 사용하여 배열을 반복합니다. (i는 인덱스, n은 내용)
코드는 다음과 같습니다.$(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
});
var str = arr.join(",");
alert(str);})멤버 이름과 변수 내용을 모두 사용하여 개체를 예시합니다. (i는 멤버 이름, n은 변수 내용) 코드는 다음과 같습니다. $(function(){
var str = $(":checkbox").map(function() {
return this.id;
}).get().join();
alert(str);})dom 요소의 예, 여기서는 입력 양식 요소를 예로 사용합니다. 돔 $.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );});에 이와 같은 코드가 있는 경우 각각 다음과 같이 사용합니다. 코드는 다음과 같습니다.$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );}); 5.each 이를 기반으로 요소 찾기
효과를 얻으려면 마우스가 그 위로 지나갈 때만 "답장"이라는 단어가 표시됩니다.
<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"/>JS 코드 다음과 같습니다
$.each($("input:hidden"), function(i,val){
alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i); //输出索引为0，1，2，3
alert(val.name); //输出name的值
alert(val.value); //输出value的值});효과를 얻으려면 모든 참과 거짓 질문에 선택 항목이 있는지 확인<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>js 코드$("div.reply").hover(function(){
$(this).find(".comment-reply-link").show();},function(){
$(this).find(".comment-reply-link").hide();});
6. >
공식 설명은 다음과 같습니다.<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 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>개요
객체 및 배열을 반복하는 데 사용할 수 있는 일반적인 반복 방법입니다.
jQuery 객체를 반복하는 $().each() 메서드와 달리 이 메서드는 모든 객체를 반복하는 데 사용할 수 있습니다. 콜백 함수에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 객체의 멤버 또는 배열의 인덱스이고 두 번째 매개변수는 해당 변수 또는 콘텐츠입니다. 각 루프를 종료해야 하는 경우 콜백 함수가 false를 반환하도록 하면 다른 반환 값은 무시됩니다.