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>ネストされたs の場合、属性を #<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>

これを行うためにこのスクリプトを作成しましたが、両方のリスト内のすべてのタグに影響するようです。

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

私がどこで間違ったのか教えてくれる人がいるかどうか疑問に思っていましたか?

4

3 に答える 3

1

以下のような子がある場合は、dom を確認します。

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

あなたのコードでは、あなたが使用してチェックしているif条件の中にあります.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

ネストされた<ul>要素を見つけて、それらの親に移動し、その中の を<li>選択し<a>て、 を変更しhrefます。

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

コードが機能しない理由については、主に 2 つの問題が原因です。まず、find子孫のすべてのレベルをトラバースします。あなたが実際にやろうとしているのは、最初のレベルの子孫をトラバースすることなので、children. 第二に、has(直感的ではありませんが) ブール値を返さず、一致したセットを必要な要素にフィルター処理するだけです (そのため、if空でないオブジェクトは true と評価されるため、これを an で使用しても意味がありません)。修正すると、コードは次のようになります。

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

これらのアプローチのどちらでも必要なことは実行できますが、2 番目のアプローチはより単純であるため、パフォーマンスが向上する可能性があります。

于 2013-02-13T06:27:34.557 に答える