jQuery의 순회 기능에 대한 간략한 설명
- 青灯夜游앞으로
- 2021-01-20 16:08:541928검색
이 글에서는 jQuery의 순회 기능을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
추천 튜토리얼: jq 튜토리얼
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 42. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!