jquery each() children()_综合

1、each() 方法规定为每个匹配元素规定运行的函数。

$("button").click(function(){$("li").each(function(){alert($(this).text())// 输出所有的li元素});
});

2、eq()

3、children() children 查找直接的子元素，不会跨层级

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.t_ys{background-color: #2F89F1;height: 50px;width: 600px;display: flex;justify-content: space-around;align-items: center;color: white;margin-top: 10px;}</style><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>	</head><body><div class="t_ys"><div class="name">小一</div><div class="xh">12345678901</div><div class="js">我是小一</div></div><div class="t_ys"><div class="name">小二</div><div class="xh">12345678902</div><div class="js">我是小二</div></div><div class="t_ys"><div class="name">小三</div><div class="xh">12345678903</div><div class="js">不存在三</div></div><div class="t_ys"><div class="name">小四</div><div class="xh">12345678904</div><div class="js">我是小四</div></div></body><script type="text/javascript">$(".t_ys").click(function(){$(this).css("background-color","#FF01C7");//方法一 find查找所有的子元素，会一直查找，跨层级查找 var choose_name_1= $(this).find(".name").html();console.log("choose_name_1-------"+choose_name_1);//方法二 children 查找直接的子元素，不会跨层级var choose_name_2 = $(this).children(".name").html();console.log("choose_name_2-------"+choose_name_2);})</script></html>

4、find() find查找所有的子元素，会一直查找，跨层级查找

综合实例：实现切换年份显示不同年份的数据，获取某行的年份值与当前值比较，相等显示，不相等隐藏（display：none）

$(document).ready(function () {$('select').change(function (e) {var date = e.target.valuechangend(date)})changend(2019);
})function changend(date){var ind = 0$("#maint tr").each(function(){ind++;if(ind>1){var a = $(this).children();lm =a[0].innerText;if(lm==date){a[0].parentElement.style.display=""}else{a[0].parentElement.style.display="none"}}});
}

5、parentElement

parentElement属性返回指定元素的父元素。parentElement和parentNode之间的区别在于，如果父节点不是元素节点，则parentElement返回null。在大多数情况下，使用哪个属性并不重要，但是，parentNode可能是最受欢迎的。此属性是只读的。

例子：单击元素（<span>）以隐藏其父节点（<div>）

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title></title><head><style>div {box-sizing: border-box;padding: 16px;width: 100%;background-color: red;color: #fff;}.closebtn {float: right;font-size: 30px;font-weight: bold;cursor: pointer;}.closebtn:hover {color: #000;}</style>
</head>
<body><div><span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span><p>要关闭此容器，请单击右侧的X符号。</p>
</div></body>
</html>