Как добраться до потомка родителя родителя?
Вот такой у меня хтмл
<div class='comment'>
<div class='info'>
<a href='JavaScript:void(0);' class='link_comment'> <span>Коментарии</span></a>
</div>
<div class='picture'>
</div>
<div class='comment_text' style='display:none;'></div>
<div class="dashed_line"></div>
</div>
По нажатию на ссылку "комментарии" я хочу чтобы у меня div class='comment_text' приобрёл свойство display:block.
$(document).ready(function(){
$(".link_comment").click(function () {
$('div.review_text').css('display', 'block');
})
})
Но, таких div class='comment_text' у меня несколь ко на странице, а мне нужно открыть конкретный, тоесть сложность состоит в том, чтобы добраться до родителя родителя (можно сказать дедушки) относительно нажатой ссылки, и применить стиль к потомку с классом .review_text . Читал инфу в инете но чето не вьехал. Помогите пожалуйста разобраться |
Цитата:
$(document).ready(function(){
$(".link_comment").click(function () {
$('div.review_text').parent().parent()
})
})
Либо http://jquery-docs.ru/Traversing/parents/#expr
$(document).ready(function(){
$(".link_comment").click(function () {
$('div.review_text').parents('comment')
})
})
|
ни так ни так не работает. И к тому же мне нужно произвести изменение с элементом который состоит в том же диве что и на нажатая ссылка .link_comment тоесть еще тут должно быть this
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".link_comment").click(function () {
$(this).parent().parent().find('.comment_text').css('display', 'block');
})
})
</script>
</head>
<body>
<div class='comment'>
<div class='info'>
<a href='JavaScript:void(0);' class='link_comment'> <span>Коментарии</span></a>
</div>
<div class='picture'>
</div>
<div class='comment_text' style='display:none;'>comment_text</div>
<div class="dashed_line"></div>
</div>
</body>
</html>
|
$(this).parent().parent().find('.comment_text').cs s('display', 'block');
Спасибо огромное! выручил реально |
я бы сделал попроще.
$(document).ready(function() {
// делегирование событий. комментов та много будет ?
$(".comment").delegate(".link_comment", "click", function(e){
// поднимаемся до общего родителя и опускаемся до этого элемента
$(this).parents(".comment").find(".comment_text").
//что делаем с ним
*!*
toggle()
*/!*
});
})
в принципе, красную строчку можно заменить на show(), тогда элемент не будет скрываться при посторном нажатии. пример
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".comment").delegate(".link_comment", "click", function(e){
$(this).parents(".comment").find(".comment_text").toggle()
});
})
</script>
</head>
<body>
<div class='comment'>
<div class='info'>
<a href='JavaScript:void(0);' class='link_comment'> <span>Коментарии</span></a>
</div>
<div class='picture'>
</div>
<div class='comment_text' style='display:none;'>comment_text</div>
<div class="dashed_line"></div>
</div>
</body>
</html>
PS. ksa, О_о |
| Часовой пояс GMT +3, время: 07:20. |