0

<ul>我有一个由嵌套在几个 s 中的几个s组成的菜单<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>带有嵌套<ul>s 的 s，我想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>

我已经编写了这个脚本来做到这一点，但它似乎会影响两个列表中的所有标签。

$.each($("#menu ul li"), function() {
  if($(this).has("ul")){
   $(this).find("a").attr("href", "#");
  };
});

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

4

3 回答 3

1

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

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

至于为什么您的代码不起作用，这是由于两个主要问题。首先，find遍历所有层级的后代。你实际上想要做的只是遍历第一级后代，所以使用children. 其次，has（非直观）不返回布尔值，它只是将匹配的集合过滤为必要的元素（因此在 an 中使用它if是没有意义的，因为任何非空对象的计算结果都是 true）。更正后，您的代码将显示为：

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

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

于 2013-02-13T06:27:34.557 回答
1

检查 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>
于 2013-02-13T06:27:43.340 回答
1

这会很好：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

于 2013-02-13T07:09:02.337 回答