jquery.parents () выбирает дедушку и бабушку и сестру

Question

То, что я пытаюсь сделать, - это когда пользователь фокусируется на текстовом поле, набор полей, в котором он находится, добавит класс «active_fieldset», поэтому он дает хороший визуальный признак того, где пользователь находится в форме. Используя следующий javascript, он влияет на родительский набор полей, но также влияет на все наборы полей одного уровня. Я делаю что-то неправильно? Что-то не так с моим HTML или javascript?

Пример HTML:

<div id="content">

 <form action="next_page" method="post">

  <fieldset>
   <legend>Foo</legend>

   <p><label for="one">One</label> <input type="text" class="input_text" name="one" value="" id="one"></p>
  </fieldset>

  <fieldset>
   <legend>Bar</legend>

   <p><label for="two">Two:</label><input type="text" class="input_text" name="two" value="" id="two"></p>

  </fieldset>

  <p><input type="submit" value="Continue &rarr;"></p>
 </form>

</div>

form.js:

$(document).ready(function(){
 $('.input_text').focus(function(){
  $(this).parents('fieldset').addClass("active_fieldset");
 });
});

EDIT:

Я включил свой CSS:

fieldset
{
    border-width: 10px 0 0 0;
    border-style: solid;
    border-color: #0D6EB8;
}

fieldset.active_fieldset
{
    border-width: 10px 0 0 0;
    border-style: solid;
    border-color: #0D6EB8;
}

Answer 1

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

$('.input_text').focus( function() {
    $('fieldset').removeClass('active_fieldset');
    $(this).closest('fieldset').addClass('active_fieldset');
});

Цитирование из документов:

Ближайшие работы, сначала посмотрев на текущий элемент, чтобы увидеть, соответствует ли он указанное выражение, если это так просто возвращает сам элемент. Если оно не соответствует, то он будет продолжать пройти документ, родительский родитель, пока не будет найден элемент, который соответствует указанному выражению. Если соответствующий элемент не найден будет возвращен.

Answer 2

Возможно, это ошибка в коде CSS. Я думаю, что предложение использовать JQuery.closest было правильным.

Answer 3

Используйте parent () с параметром.

$ ( "# тест") родители ( 'что-то'.). // даст вам родителя с классом чего-то.

Answer 4

Я бы предложил:

$("input.input_text").focus(function() {
  $("fieldset.active_fieldset").removeClass("active_fieldset");
  $(this).parents("fieldset").addClass("active_fieldset");
}).blur(function() {
  $("fieldset.active_fieldset").removeClass("active_fieldset");
});