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()只进行一次深度尝试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 一样，选择器中的空格表示子 OR 后代。

于 2013-09-04T11:50:44.657 回答
2

甚至：

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

这将选择#firstdiv 中的所有“a”元素

于 2013-09-04T11:51:33.433 回答
2

根据jQuery 文档

.children() 方法与 .find() 的不同之处在于 .children() 仅沿 DOM 树向下移动一个级别，而 .find() 也可以向下遍历多个级别以选择后代元素（孙子等）

因此，将您的选择器更改为：

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

这将搜索 DOM 树中 #firstdiv 下的所有内容。

于 2013-09-04T11:50:53.633 回答
1

试试这个http://jsfiddle.net/ApfJz/22/

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

演示 

    $(document).ready(function() {
        $('#firstdiv a').click(function(){
            alert($(this).attr('title'))
        });
    });
于 2013-09-04T11:54:26.160 回答
0 
$("#firstdiv").find("a").on('click', function () {

});
于 2013-09-04T11:54:38.417 回答