jQuery根据li类改变Href

Question

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 而不是其相关的子元素？

Answer 1

使用即时 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", "#");
});