首页 网络技术
  1. 正文

jquery使用parent()、prev()、next()、children()查找定位元素

有时候需要找到某个元素添加下一步操作,比如zblog代码插入优化Plus这个插件,点击不同的按钮需要定位不同的元素。

当然可以通过$("#id")的方式去定位,但是没有元素id就需要用关系查找的方式定位元素就很有用了。

关系查找缺点 :

操作繁琐,容易被误判

使用到的Jquery方法 :

parent() 查找父级元素

prev() 查找上一个同辈元素

next() 查找下一个同辈元素

children() 查找子类元素

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ关系查找</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
  <h1>aaaaaaaaaaa</h1>
  <p>ppppppppppp</p>
  <h1>aaaaaaaaaaa</h1>
  <p>ppppppppppp</p>
</div>
<div> parent().prev() </div>
<div>
  <button id="parentprev">parent().prev()</button>
  <button id="parentnext">parent().next()</button>
  <button id="children">children</button>
</div>
<div> parent().next() </div>
<script>
    $("#parentprev").click(function(){
        $(this).parent().prev().css("color","red");
    });
	$("#parentnext").click(function(){
        $(this).parent().next().css("color","red");
    });
	$("#children").click(function(){
        $(this).parent().prev().prev().children("p").css("color","red");
    });
</script>
</body>
</html>

本文标题:jquery使用parent()、prev()、next()、children()查找定位元素
本文链接:https://www.qqooo.cn/post/2234.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 feelym@88.com 处理,谢谢!