Проблемы с jQuery .parent().parent()

Итак, я новичок в jQuery, и я пытаюсь изменить вещи div, которые являются 2 уровня о триггере функции:

Вот моя первая попытка: я пытаюсь найти ближайший ".node", который является родителем всех остальных элементов div, и редактировать дочерние элементы div.

<script>
function details() {
    $node = $(this).closest( ".node" );
    $node.find( ".content.right .user" ).show();
    $node.find( ".options" ).show();
    $node.find( ".details" ).hide();
}
</script>

Поскольку это не сработало, я попытался что-то вроде:

<script>
function details() {
    $node = $(this).parent( ".details" ).parent( ".node" );
    $node.find( ".content.right .user" ).show();
    $node.find( ".options" ).show();
    $node.find( ".details" ).hide();
}
</script>

Но это тоже не сработало, так что теперь я потерялся. Вот мой HTML:

<div class="node">
    <div class="avatar left" style="background-image:url(assets/default_avatar.png);"></div>
    <div class="content right">
        <div class="user">Foo <a href="./">~Foo_bat</a></div>
    Integer quis ante iaculis, mollis nibh fermentum, vestibulum massa. Quisque et erat et dolor sagittis posuere eu ac risus. Vestibulum a varius turpis. Nunc tincidunt ipsum at tellus volutpat vestibulum. Nulla elementum neque a lectus ullamcorper, eu amet.</div>
    <div class="options">
        <a class="left" href="./reply">Reply</a>
        <a class="left" href="./repost">Repost</a>
        <a class="right" href="./report">Report</a>
    </div>
    <div class="details">
        <a class="right" href="#" onclick="details()">Details</a>
    </div>
</div>

Кто-нибудь знает, почему это может не сработать? Это, наверное, очень легко увидеть, но я не могу это выбрать...

4 ответа

Решение

Вы должны передать объект этой функции. Потому что в вашем текущем методе, this ссылается на объект окна.

<a class="right" href="#" onclick="details(this)">Details</a>

Тогда вы можете использовать .closest() вместо parent().parent()

function details(obj) {
    $node = $(obj).closest( ".node" );
    $node.find( ".content.right .user" ).show();
    $node.find( ".options" ).show();
    $node.find( ".details" ).hide();
}

Если вы все равно используете jQuery, я бы посоветовал вам использовать jQuery click обработчик и не встроенный клик.

function details(el) {

    $node = $(el).closest( ".node" );
    $node.find( ".content.right .user" ).show();
    $node.find( ".options" ).show();
    $node.find( ".details" ).hide();
}

$('.details a.right').click(function(e){
    e.preventDefault();
    details(this)
});

скрипка

Вы должны попробовать другой селектор jQuery для вышеупомянутого тега "родители", у этого селектора есть аргумент, который вам очень помогает. для вашего случая, чтобы получить тег ".node", вы можете использовать: {$(this).parents('.node')}

Почему вы не можете просто получить доступ к самому элементу, с правильным селектором jquery, что-то вроде..

$(".node .options").hide()

Я взял пример Shaunak D и изменил его:

http://jsfiddle.net/sk993/1/
Другие вопросы по тегам