jQuery对象找出同级 - 会coding的HAM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery对象-同级标签</title>
<style>
/* article{
position: relative;
}
section{
position: relative;
} */
</style>
</head>
<body>
<!-- <ul>
<li>第1项</li>
<li>第2项</li>
<li><a href="">第3项</a></li>
<li><span>第<strong>4</strong>项</span></li>
<li>第5项</li>
<li>第6项</li>
<li><strong>第7项</strong></li>
</ul> -->
<!-- <article>
<h1>这是标签</h1>
<section>
123
<p>这是段落<strong>这是段落</strong>这是段落</p>
</section>
</article> -->
<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
<li>第5项</li>
<li>第6项</li>
<li>第7项</li>
</ul>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>

JavaScript

// $('li:nth-child(4)').prev().css('color','red')
// $('li:nth-child(4)').prevAll().css('color','red')
// $('li:nth-child(5)').prevAll(':gt(1)').css('color','red')
// prevAll时 jQuery对象中的元素是从后向前排的
// $('li:nth-child(4)').siblings().css('color','blue')
// $('li:nth-child(4)').next().css('color','blue')
// $('li:nth-child(4)').nextAll().css('color','blue')
// $('li:nth-child(3)').nextAll(':lt(3)').css('color','blue')
// 找出下级
// $('li').find('strong').css('color','red')
// $('li').children().css('font-size','1.5rem')
// console.log($('li').contents())
// 查找匹配元素内部所有的子节点
// 找出上级
// $('strong').parent().css('color','red')
// $('strong').parent().parent().parent().css('color','red')
// $('article').find('strong').parent().css('color','red')
// parentsUntil查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
// $('strong').parentsUntil('article').css('border','1px solid blue')
// $('strong').closest('strong').css('border','1px solid blue')
// $('strong').closest('*').css('border','1px solid blue')
// $('strong').closest('section').css('border','1px solid blue')
// 返回第一个匹配元素用于定位的父节点。
// $('strong').offsetParent().css({
// 'background-color':'red',
// 'color':'white'
// })
// jquery对象回到前一个jQuery对象
var chain = $('li:nth-child(4)').prev().prev().nextAll().last()
// chain.css('color','red')
// chain.end().css('color','red')
// chain.end().end().css('color','red')
// chain.end().end().end().css('color','red')
chain.end().end().end().end().css('color','red')

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论