с помощью JQuery выбрать конкретный элемент

Question

У меня есть некоторые HTML, такие как:

<div class="location"> 
    <h3><a class="location_name" href="#">Beijing, China</a><a class="arrow">&gt;</a></h3> 
     <p class="blogentry">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</p> 
</div> 

, и я хочу, чтобы иметь возможность скользить вниз .blogentry когда .location_name нажата. Я делаю следующее, используя jquery:

$(function(){ 
    $(".location_name").click(function(eventObject){ 
     $(this).parents(".location").find(".blogentry").slideToggle(); 
    }); 
}); 

Это лучший способ сделать это? Было бы лучше, если бы я выложил свой html по-другому?

Спасибо за вашу помощь

Answer 1

$(".location_name").click(function(eventObject){ 
    $(this).parent().siblings('.blogentry').slideToggle(); 
}); 

[править] жаль, что пропустил <a> был завернут в <h3>, скорректированной кода. Предоставленный теперь это действительно не добавляет много над тем, что написал OP. Это один из тех случаев, когда я утверждаю, что <a> не нужен, так как без javascript он ничего не делает. Вы также можете просто сделать <h3> доступным для использования элементом.

Answer 2

Вы можете попробовать это тоже

$(function(){ 
    $(".location").on('click', '.location_name', function(e){ 
     e.preventDefault(); 
     $(this).parent().siblings('p.blogentry').slideToggle(); 
    }); 
});​ 

Примечание: Вы должны использовать preventDefault иначе ваша страница будет прыгать в верхней части для href='#'

Вот это example, другой example и this is different.

Answer 3

Если вы хотите изменить макет вашего HTML, вы могли бы сделать что-то вроде этого:

<div class="location"> 
     <h3><a class="location_name" href="#">Beijing, China</a><a class="arrow">&gt;</a></h3> 
     <div class="blogentry"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit 
     </div> 
</div> 

Затем измените код JQuery для этого:

$(function(){ 
    $(".blogentry").hide(); 
    $(".location h3").click(function(eventObject){ 
     $(this).next(".blogentry").slideToggle(); 
    }); 
}); 

Не говорю, что это лучше чем то, что вы сейчас делаете. Но я думаю, что селектор jQuery для blogentry немного легче понять. Это также будет работать для любых дополнительных местоположений/записей в блогах, которые вы добавляете на страницу.

Вот рабочий пример:. jsbin.com/isorig/7