Как использовать firebug console.log для поиска jquery parent / children в <ul> - PullRequest
Новая
       2

Как использовать firebug console.log для поиска jquery parent / children в <ul>

1 голос
/ 26 июля 2011

Я просто пытаюсь распечатать, чтобы лучше понять, как перемещаться по дереву, используя console.log.

Когда я нажимаю на родителя, я хочу напечатать, что это дети.Я думал, что это будет легко, как 

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

Я пытался использовать 

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

Это дает мне [].Я хочу распечатать удостоверение личности ребенка.

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;
    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());
    });
});

1 Ответ

1 голос
/ 29 августа 2011

Это должно сделать трюк для структуры ваших тегов ul / li / a.

DEMO

Для демонстрации у меня естьпросто предупредил идентификаторы для вас.Вы можете изменить их на console.log, если хотите.Так что теперь, что я сделал ... 

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

Я добавил классную кнопку для каждого из ваших родителей, просто чтобы прояснить это.Так что теперь, когда щелкает любой элемент с классом «кнопка», мы получаем следующий «ul» в вашей HTML-структуре - (next() получает следующий элемент на том же уровне иерархии вашего кода).Затем для каждого ребенка в этом 'ul' я оповестил идентификатор каждого якоря в каждом ребенке (поскольку ваша структура <li><a id="..."></li>).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...