jQuery之.each( function(index, Element) )

1.$(selector).each()
主要对DOM的遍历
$(selector).each(function(index,element)){
//index - 选择器的 index 位置从0开始
//element - 当前的选择器（也可使用 “this” 选择器）
}
$(“button”).click(function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: …n(){ alert((this).text())
});
});

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="javascript/jquery-3.3.1.min.js"></script></head><style>div.kk { color:red; text-align:center; cursor:pointer;font-weight:bolder; width:300px; }ul { font-size:18px; margin:0; }span.tt { color:blue; text-decoration:underline; cursor:pointer; }.example { font-style:italic; }div.ww { width:40px; height:40px; margin:5px; float:left;border:2px blue solid; text-align:center; }span.ww { color:red; }</style><body><ul><li>foo</li><li>bar</li><li>lala</li><li>cece</li></ul><hr /><div class="kk">Click here</div><div class="kk">to iterate through</div><div class="kk">these divs.</div><hr />To do list: <span class="tt">(click here to change)</span><ul><li>Eat</li><li>Sleep</li><li>Be merry</li></ul><hr /><button>Change colors</button><span class="ww"></span><div class="ww"></div><div class="ww"></div><div class="ww"></div><div class="ww"></div><div id="stop" class="ww">Stop here</div><div class="ww"></div><div class="ww"></div><div class="ww"></div><script type="text/javascript">/*** .each(function(index,Element))   返回jQuery* 描述：遍历一个jQuery对象，为每个匹配元素执行一个函数* * function(index,Element)* 类型：Function()* 为每个匹配元素执行的一个函数* * *//*** .each()方法用来让DOM循环结构更简单更不易出错。* 它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，* 会传递当前循环次数作为参数（从0开始计数）。更重要的是，回调函数* 是在当前DOM元素为上下文的语境中触发的。因此this总是指向这个元素。* * */$(document).ready(function(){//例子一//遍历，  然后通过返回false来终止循环$("li").each(function(suoyin){console.log(suoyin + " ：" + $(this).text() + "<br />");if(suoyin >= 2) return false;});//例子二 : 遍历三个div并设置它们的color属性$(document.body).click(function(){$("div").each(function(i){if(this.style.color != "blue"){this.style.color = "blue";}else{this.style.color = "";}});});//例子三：$("span").click(function(){$("li").each(function(j){$(this).toggleClass("example");if($(this).is(".example")) this.style.color = "blue";if(j >= 2) {return false;}});});//例子四：$("button").click(function(){$("div").each(function(index,domEle){$(domEle).css("background-color","yellow");if($(this).is("#stop")){$("span").text("stop at : " + index);return false;}});});});</script></body>
</html>

2.$.each
遍历对象或数组
$.each(Array, function(i, value) {
this; //this指向当前元素
i; //i表示Array当前下标
value; //value表示Array当前元素
});
$.each(Object, function(name, value) {
this; //this指向当前属性的值
name; //name表示Object当前属性的名称
value; //value表示Object当前属性的值
});

3.find()
find() 方法获得当前元素集合中每个元素的后代
//搜索所有段落中的后代 span 元素，并将其颜色设置为红色：
$(“p”).find(“span”).css(‘color’,‘red’);

4.siblings()
siblings() 获得匹配集合中每个元素的同胞
//查找每个 p 元素的所有类名为 “selected” 的所有同胞元素：
$(“p”).siblings(".selected")

参考链接
参考链接

jQuery之.each( function(index, Element) )相关推荐

JQuery中append(function(index,html)),appendTo(),after(function(index,html)),clone()方法
不多说废话,直接说要点 1. append(function(index, html)) 该方法是版本1.4 中新增的,其功能是将一个function 函数作为append 方法的参数,该函数的功能 ...
jquery $.each(data, function (index, value) {
在json中常常碰到这样的代码: 遍历处理data,可以是数组.DOM.json等,取决于直接给定或者ajax返回的类型 function (index, value)中index是当前元素的位置,v ...
jquery $.each(data, function (index, value) { }
在json中常常碰到这样的代码: 遍历处理data,可以是数组.DOM.json等,取决于直接给定或者ajax返回的类型 function (index, value)中index是当前元素的位置,v ...
$.each(json,function(index,item){ }); jquery遍历
$.each(json,function(index,item)里面的index代表当前循环到第几个索引, item表示遍历后的当前对象, 比如json数据为: [{"name": ...
【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别
jQuery中处理加载时机的几种方式第一种: jQuery(document).ready(function() {alert("你好"); }); //或 $(document ...
jQuery.protoype.xxx=function(){}
在的init就是fn和prototype的一个方法.想调用只能 jQuery.fn.init()或者是jQuery.prototype.init(),那怎么办呢?你看我们一般都是这样调用fn里面的函数 ...
ajax 中$.each(json,function(index,item){ }); 中的2个参数表示什么意思?
$.each(json,function(index,item) 里面的index代表当前循环到第几个索引,item表示遍历后的当前对象,比如json数据为:[{"name":&q ...
JQ+ ES6模板字符串 + $.each(数组, function(index, 数组中的对象) {操作程序} 循环遍历添加新html结构标签
(function() {// 1. 准备相关数据var hotData = [{city: "北京", // 城市sales: "25, 179", // 销 ...
初始化JQuery方法与(function(){})(para)匿名方法介绍
一.初始化JQuery对象 DOM加载完成时运行代码 1.$(document).ready(function(){ 全写// 在这里写你的代码...}); 2.jQuery(function(){ ...

jQuery之.each( function(index, Element) )

jQuery之.each( function(index, Element) )相关推荐

最新文章

热门文章