我有一个具有以下结构的无序列表。
如果我单击列表项 1中的链接,我希望能够选择列表项 1 下的所有链接(锚标记),并将类更改为"是"。
如何?
<ul>
<li><div><span><a class="no" href="#">List Item 1</a></span></div>
<ul>
<li><div><span><a class="no" href="#">Sub List Item 1</a></span></div></li>
<li><div><span><a class="no" href="#">Sub List Item 2</a></span></div>
<ul>
<li><div><span><a class="no" href="#">Sub Sub List Item 1</a></span></div></li>
<li><div><span><a class="no" href="#">Sub Sub List Item 2</a></span></div></li>
<li><div><span><a class="no" href="#">Sub Sub List Item 3</a></span></div></li>
</ul>
</li>
<li><div><span><a class="no" href="#">Sub List Item 3</a></span></div></li>
</ul>
</li>
<li><div><span><a class="no" href="#">List Item 2</a></span></div>
<ul>
<li><div><span><a class="no" href="#">Sub List Item 5</a></span></div></li>
<li><div><span><a class="no" href="#">Sub List Item 6</a></span></div></li>
<li><div><span><a class="no" href="#">Sub List Item 7</a></span></div></li>
</ul>
</li>
</ul>
答
$(href).closest('li').find('a').each(function (index, child) {
$(child).removeClass('no').addClass('yes');
//Do more logic here
});
$('.no').on('click', function () {
$(this).closest('li').find('a').andSelf().addClass('yes').removeClass('no');
});