例如有这样的HTML结构
<ul> <li> <h3 class="title">标题1</h3> <ul> <li>项目1</li> <li>项目2</li> </ul> </li> <li> <h3 class="title">标题2</h3> <ul> <li>项目1</li> <li>项目2</li> </ul> </li> </ul>
需要点击h3,对其兄弟节点ul进行相关操作:
$(".title").click(function () { $(this).parent().find('ul').addClass('show'); });
就是先返回其父节点,然后再在其子节点搜索ul,返回jQuery对象,可以使用jQuery的各种方法进行操作。这种方式会对所以符合要求的子节点进行操作,需要查某一个,可以选择搜索class。
<ul> <li> <h3 class="title">标题1</h3> <ul class="x2"> <li>项目1</li> <li>项目2</li> </ul> <ul> <li>项目4</li> <li>项目5</li> </ul> <ul> <li>项目6</li> <li>项目7</li> </ul> <ul> <li>项目8</li> <li>项目9</li> </ul> </li> <li> <h3 class="title">标题1</h3> <ul> <li>项目11</li> <li>项目12</li> </ul> <ul> <li>项目12</li> <li>项目14</li> </ul> <ul> <li>项目15</li> <li>项目16</li> </ul> <ul> <li>项目17</li> <li>项目18</li> </ul> </li> </ul>
$(".title").click(function () { $(this).parent().find('.x2').addClass('show'); });
半途不废学JavaScript,或许对你有用。