• 当前标签:同级标签

程序开发 jQuery对象找出同级

<!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> -->   <!-- jquery对象回到前一个jQuery对象 -->     <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')

2017-08-16 19:27:59 23 0 0
阅读详情
  • 1
前往