Refer to nested HTML elements with jQuery

Question

I have some extensive HTML element in the following (simplified) format:

<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>

I want to access the value of the title attributes of all a-tags inside the div-container with the id="firstdiv" on click. I tried the following jQuery function but it didn't work:

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

Any ideas what I'm doing wrong?

Answer 1

children() only goes one deep try find()

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

will get all a tags titles when the #first_div is clicked

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

will get the title of the a tag you clicked on

Answer 2

children() does what it says, looks at child nodes only - not descendant nodes also. For that, you need find() . However, you need neither in your case, just a change to your selector.

$('#firstdiv a')

As with CSS, a space in the selector denotes a child OR descendant.

Answer 3

According to the jQuery documentation

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well

So change your selector to:

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

This will search everything beneath #firstdiv in your DOM tree.

Answer 4

Or even:

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

That will select all 'a' elements within #firstdiv

Answer 5

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

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

Answer 6

Demo

    $(document).ready(function() {
        $('#firstdiv a').click(function(){
            alert($(this).attr('title'))
        });
    });

Answer 7

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

});