Question

我有一个菜单，其中包含嵌套在几个<ul>内的<li>个偶合。例如：

<ul>
<li><a href="somewhere.html">Item 1</a></li>
<li><a href="somewhere.html">Item 2</a></li>
<li><a href="somewhere.html">Item 3</a>
  <ul>
    <li><a href="somewhere.html">Sub Item 1</a></li>
    <li><a href="somewhere.html">Sub Item 2</a></li>
  </ul>
</li>
</ul>

对于嵌套<li>的{{1}}，我想用＃替换<ul>属性，例如：

href

我已编写此脚本来执行此操作，但它似乎会影响两个列表中的所有标记。

<li><a href="somewhere.html">Item 2</a></li>
<li><a href="#">Item 3</a>
      <ul>
        <li><a href="somewhere.html">Sub Item 1</a></li>

想知道是否有人可以告诉我哪里出错了？

Answer 1

找到嵌套的<ul>元素，导航到其父<li>，选择其中的<a>，然后更改href。

$('li > ul').parent().children('a').attr('href', '#');

<小时/> 至于为什么你的代码不起作用，这是由于两个主要问题。首先，find遍历所有级别的后代。你实际上要做的只是遍历第一级后代，所以使用children。其次，has（非直观地）不返回bolean值，它只是将匹配的集合过滤到必要的元素（因此在if中使用它是没有意义的，因为任何非空对象评估为真）。更正后，您的代码将显示为：

$("#menu ul li").has("ul").children("a").attr("href", "#");

这些方法中的任何一种都可以满足您的需求，但第二种方法更直接，因此可能会产生更好的性能。

Answer 2

检查dom是否有下面的孩子。

$(this).children('ul').length

在您的代码中，如果使用.has

进行检查的条件，则在其中

经过测试的工作代码

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

    $(function()
    {
        $.each($("#menu ul li"), function()
        {
            if($(this).children('ul').length > 0)
            {
                $(this).find("a").attr("href", "#");
            };
        });
    });

</script>

<ul>
    <li><a href="somewhere.html">Item 1</a></li>
    <li><a href="somewhere.html">Item 2</a></li>
    <li><a href="somewhere.html">Item 3</a>
      <ul>
        <li><a href="somewhere.html">Sub Item 1</a></li>
        <li><a href="somewhere.html">Sub Item 2</a></li>
      </ul>
    </li>
</ul>

Answer 3

这没关系：http://jsfiddle.net/H8JDy/

$('#menu ul li > ul').siblings('a').attr('href', '#'); // <---this does the trick

由 nbrooks评论 there's no reason for it to be wrapped in the loop

Jquery：删除父列表项的href属性

3 个答案: