How to use firebug console.log to find jquery parent/children in a <ul>_问答_开发者

How to use firebug console.log to find jquery parent/children in a <ul>

开发者 https://www.devze.com 2023-03-23 06:29 出处：网络

I\'m just trying to print back to better understand how to move around the tree traversal using console.log.

I'm just trying to print back to better understand how to move around the tree traversal using console.log.

When I click on a parent I'd like to print back it's children. I thought it would be easy as

console.log($(event.target).children());

I've tried to use

console.log($(event.target).children("ul li a"));

It gives me []. I'm looking to print out the child's ID.

HTM:

<body>
<div class = "testButton">
    <ul>
        <li>
            <a href="#" id = "Button One"> Parent One </a>
                <ul>
                    <li> <a href="#" id = "P1 child">P1 child</a> </li>
                </ul>
            <a href="#" id = "Button Two"> Parent Two </a>
                <ul>
                    <li> <a href="#" id = "P2 child">P2 child</a> </li>
                </ul>
            <a href="#" id = "Button Three"> Parent Three </a>
                <ul>
                    <li> <a href="#" id = "P3 child">P3 child</a> </li>
                </ul>
            <a href="#" id = "Button Four"> Parent Four </a>
                <ul>
                    <li> <a href="#" id = "P4 child">P4 child</a> </li>
                </ul>        
        </li>
    </ul>
</div>

</body>
</html>

CSS:

.testButton ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0; 
}

.testButton li {
    display: inline;
}

.testButton a {
    display: block;
    width: 6em;
    text-align: center;
  开发者_如何学JAVA  text-decoration: none;
    margin: 0em auto .14em;
    padding: .1em .5em .1em .5em;
    font-size: 2.5em;
}

.upButton {
    background-color: #ccc;
    color: #000;
}

.overButton {
    background-color: #222; 
    color: #fff;
}

.outButton {
    background-color: #ccc;
    color: #000;
}

.clickButton {
    background-color: #F90;
    color: #222;
}

JS:

google.load('jquery', '1.6.2');
google.setOnLoadCallback(function(){
    $(".testButton a").addClass("upButton");

    $(".testButton a").mouseover(function(event){
        $(event.target).removeClass("outButton").addClass("overButton");    
    });

    $(".testButton a").mouseout(function(event){
        $(event.target).addClass("outButton");
    });

    $(".testButton a").click(function(event){
        $(".testButton a").removeClass("clickButton");
        $(event.target).addClass("clickButton");
        $(this).blur();
        console.log($(event.target));
        console.log($(event.target).children());        
        console.log($(event.target).parent().children());
        console.log($(event.target).siblings());
    });
});

This should do the trick for the structure of your ul/li/a tags.

DEMO

For the demo I have just simply alerted the ids for you. You can change these to console.log if you like. So now what I did...

$('.button').click(function() {
    $(this).next('ul').children().each(function() {
        alert($(this).children('a').attr('id'));
    });
});

I added a class 'button' to each of your parents just to make it clear. So now when any item with a class 'button' is clicked, we get the next 'ul' in your html structure - (next() gets the next element at the same hierachy level of your code). Then for each child within that 'ul' I have alerted the id of each anchor within each child (as your structure is <li><a id="..."></li>).