Как найти правильный div, связанный с другим при фокусировке на div в jquery?

Question

Я пытаюсь сделать следующее:

<div class="messageNewComment">
<form style="margin:0px;" action="cible.php" method="post">

<textarea class="content"></textarea>
<div class="button_block">
<input type="submit" class="button" value=" Partager "/>
<input type="submit" class="cancel" value=" Annuler " />
</div>

</form>
</div>

Текстовое поле увеличивается, когда вы на нем фокусируетесь, и кнопка-блок отображается с помощью jquery. Это прекрасно работает, когда у меня есть только один раздел, как этот выше, но так как у меня будет многократная область комментариев, я бы хотел, чтобы появился правильный button_block ... Как я могу добиться этого?

вот мой код jquery:

$(function() 
{
$(".content").focus(function()
{
$(this).height("50px"); //animate({"height": "50px",}, "fast" );
if ($(this).height() == 50) {
$(".button_block").slideDown("fast");
}
return false;
});

$(".cancel").click(function()
{
/*if ($(".content").height() != 50) {*/
$(".content").height("20px"); //animate({"height": "20px",}, "fast" );
$(".button_block").slideUp("fast");
return false;
//}
});

На данный момент каждый button_block страницы отображается ... так что это не очень удобно;)

Есть идеи?

Большое спасибо!

Готье!

Answer 1

Попробуйте заменить

$(".button_block").slideDown("fast");

С

$(this).next(".button_block").slideDown("fast");

Ваш селектор выберет все элементы с классом button_block, но нам нужен блок кнопок, следующий за текстовой областью с фокусом. Таким образом, мы можем использовать селектор jquery next .

Та же логика должна использоваться и для перемещения кнопок.

$(this).parent(".button_block").slideUp("fast").prev(".content").height("20px");

Здесь мы можем использовать родительский и prev селекторы

Answer 2

Поскольку div - это брат или сестра. Следующий должен сделать трюк:

$(".content").focus(function()
{
$(this).height("50px"); //animate({"height": "50px",}, "fast" );
if ($(this).height() == 50) {
$(this).next(".button_block").slideDown("fast");
}
return false;
});

Answer 3

Ответ keegan3d правильный, пока ваш div находится сразу после текстовой области.если какой-то другой элемент окажется между ними в будущем, вы можете использовать это:

$(function() 
{
$(".content").focus(function()
{
$(this).height("50px"); //animate({"height": "50px",}, "fast" );
if ($(this).height() == 50) {
$(this).nextAll(".button_block:first").slideDown("fast");
return false;
});

Answer 4

пройти по дереву с next()

$(".content").focus(function(){
    $(this).height(50).val('').next(".button_block").show();
  return false;
});