jQuery对象找出同级

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>jQuery对象-同级标签</title>
  8.     <style>
  9.        /* article{
  10.            position: relative;
  11.        }
  12.        section{
  13.             position: relative;
  14.        } */
  15.    </style>
  16. </head>
  17. <body>
  18.     <!-- <ul>
  19.         <li>第1项</li>
  20.         <li>第2项</li>
  21.         <li><a href="">第3项</a></li>
  22.         <li><span>第<strong>4</strong>项</span></li>
  23.         <li>第5项</li>
  24.         <li>第6项</li>
  25.         <li><strong>第7项</strong></li>
  26.     </ul> -->
  27.     <!-- <article>
  28.         <h1>这是标签</h1>
  29.         <section>
  30.             123
  31.             <p>这是段落<strong>这是段落</strong>这是段落</p>
  32.         </section>
  33.     </article> -->
  34.   <!-- jquery对象回到前一个jQuery对象 -->
  35.     <ul>
  36.         <li>第1项</li>
  37.         <li>第2项</li>
  38.         <li>第3项</li>
  39.         <li>第4项</li>
  40.         <li>第5项</li>
  41.         <li>第6项</li>
  42.         <li>第7项</li>
  43.     </ul>
  44.     <script src="jquery.js"></script>
  45.     <script src="index.js"></script>
  46. </body>
  47. </html>
 JavaScript
  1. // $('li:nth-child(4)').prev().css('color','red')
  2. // $('li:nth-child(4)').prevAll().css('color','red')
  3. // $('li:nth-child(5)').prevAll(':gt(1)').css('color','red')
  4. // prevAll时  jQuery对象中的元素是从后向前排的
  5. // $('li:nth-child(4)').siblings().css('color','blue')
  6. // $('li:nth-child(4)').next().css('color','blue')
  7. // $('li:nth-child(4)').nextAll().css('color','blue')
  8. // $('li:nth-child(3)').nextAll(':lt(3)').css('color','blue')
  9. // 找出下级
  10. // $('li').find('strong').css('color','red')
  11. // $('li').children().css('font-size','1.5rem')
  12. // console.log($('li').contents())
  13. // 查找匹配元素内部所有的子节点
  14. // 找出上级
  15. // $('strong').parent().css('color','red')
  16. // $('strong').parent().parent().parent().css('color','red')
  17. // $('article').find('strong').parent().css('color','red')
  18. // parentsUntil查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
  19. // $('strong').parentsUntil('article').css('border','1px solid blue')
  20. // $('strong').closest('strong').css('border','1px solid blue')
  21. // $('strong').closest('*').css('border','1px solid blue')
  22. // $('strong').closest('section').css('border','1px solid blue')
  23. // 返回第一个匹配元素用于定位的父节点。
  24. // $('strong').offsetParent().css({
  25. //     'background-color':'red',
  26. //     'color':'white'
  27. // })
  28. // jquery对象回到前一个jQuery对象
  29. var chain = $('li:nth-child(4)').prev().prev().nextAll().last()
  30. // chain.css('color','red')
  31. // chain.end().css('color','red')
  32. // chain.end().end().css('color','red')
  33. // chain.end().end().end().css('color','red')
  34. chain.end().end().end().end().css('color','red')

黄良钵

博客站长,前端开发工程师

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

jQuery对象找出同级
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close