2

次の（簡略化された）形式の広範なHTML要素があります。

<div id="firstdiv" class="container">
    <ul>
        <li id="4"> <a title="ID:4">Tree</a>
            <ul>
                <li id="005"> <a title="ID:005">Leaf Tree</a>
                    <ul>
                        <li id="10"> <a title="ID:10">Fruit Tree</a>
                            <ul>
                                <li id="0050338"> <a title="ID:0050338">Apple Tree</a>
                                    <ul>
                                        <li id="399"> <a title="ID:399">Green Apple Tree</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li id="005"> <a title="ID:005">Conifer</a>
                    <ul>
                        <li id="10"> <a title="ID:10">Pine Tree</a>
                        </li>
                    </ul>
                </li>               
            </ul>
        </li>
    </ul>
</div>

クリック時に id="firstdiv" を使用して、div-container 内のすべての a-tags の title 属性の値にアクセスしたいと考えています。次のjQuery関数を試しましたが、うまくいきませんでした:

$("#firstdiv").children("a").on('click', function () { /*some code here*/ });

私が間違っていることはありますか？

4

7 に答える 7

4

children()ディープトライは1回だけfind()

$("#firstdiv").on('click', function () {
    $(this).find('a').each(function(){
        console.log($(this).attr('title'))
    })
});

をクリックすると、すべてのaタグのタイトルが取得されます#first_div

$("#firstdiv a").on('click', function () {
    console.log($(this).attr('title'))
});

aクリックしたタグのタイトルを取得します

于 2013-09-04T11:49:43.803 に答える
3

children()それが言うことを行い、子ノードのみを調べます-子孫ノードも調べません。そのためには、 が必要find()です。ただし、あなたの場合はどちらも必要ありません。セレクターを変更するだけです。

$('#firstdiv a')

CSS と同様に、セレクター内のスペースは、子または子孫を示します。

于 2013-09-04T11:50:44.657 に答える
2

jQueryのドキュメントによると

.children() メソッドは .find() とは異なり、.children() は DOM ツリーを 1 レベル下に移動するだけですが、.find() は複数のレベルを下に移動して子孫要素 (孫など) も選択できます。

したがって、セレクターを次のように変更します。

$("#firstdiv").find("a").on("click", function () {});

これにより、DOM ツリーの #firstdiv の下にあるすべてが検索されます。

于 2013-09-04T11:50:53.633 に答える
2

あるいは：

$('#firstdiv a').click(function(){
   ... do stuff
});

#firstdiv 内のすべての「a」要素が選択されます

于 2013-09-04T11:51:33.433 に答える
1

これを試してくださいhttp://jsfiddle.net/ApfJz/22/

$("#firstdiv a").on('click', function () { alert($(this).attr('title')); });
于 2013-09-04T11:52:42.070 に答える