jquery each() children()

最新推荐文章于 2025-03-13 11:45:15 发布

qq_37672347

最新推荐文章于 2025-03-13 11:45:15 发布

阅读量1.8k

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_37672347/article/details/100974858

版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

这篇博客详细介绍了jQuery中常用的DOM操作方法，包括each()用于遍历匹配元素并执行函数，eq()选择指定索引的元素，children()用于获取直接子元素而不跨层级，find()则可以查找所有后代元素。此外，还提到了parentElement属性，它返回元素的父元素，与parentNode的区别在于当父节点不是元素节点时，parentElement返回null。通过一个综合实例展示了如何利用这些方法实现动态显示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.value
		changend(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>