HTML 结构:
<li class="page_item page-item-7 page_item_has_children">
<a href="http://localhost/myproject/parent/">Parent</a>
<i class="fa fa-caret-right"></i>
<ul class="children">
<li class="page_item page-item-9">
<a href="http://localhost/myproject/parent/Child One/">Child One</a>
</li>
<li class="page_item page-item-10">
<a href="http://localhost/myproject/parent/Child Two/">Child Two</a>
</li>
</ul>
</li>
jQuery:
jQuery(document).ready(function() {
jQuery('li.page_item_has_children a[href*="/parent/"]').attr("href", "#");
});
上面的代码有效并更改了 Parent
的 URL,但同时也更改了其 Children
的 URL。所以生成的 html 是
输出:
<li class="page_item page-item-7 page_item_has_children">
<a href="#">Parent</a>
<i class="fa fa-caret-right"></i>
<ul class="children">
<li class="page_item page-item-9">
<a href="#">Child One</a>
</li>
<li class="page_item page-item-10">
<a href="#">Child One</a>
</li>
</ul>
</li>
如何只更改 Parent
href 而不是其相关的子元素?
最佳答案
使用即时 child selector >
。
Selects all direct child elements specified by "child" of elements specified by "parent".
jQuery(document).ready(function() {
jQuery('li.page_item_has_children > a').attr("href", "#");
});
关于jQuery根据li类改变Href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28232816/