Проблемы с 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/