jQuery - вопрос об обходе DOM

Question

В принципе, у меня есть кнопка, которая добавляет новый элемент списка в неупорядоченный список. Внутри этого элемента списка находится раскрывающийся список (.formSelector), который при изменении триггеров вызывает ajax-вызов для получения значений для другого раскрывающегося списка (.fieldSelector) в том же элементе списка.

Проблема заключается в этой строке:

$(this).closest(".fieldSelector").append(

Если изменить его

$(".fieldSelector").append(

второй обновления коробки правильно. Проблема в том, что когда у меня есть несколько элементов списка, он обновляет каждый раскрывающийся список на странице с помощью поля классаSelector, что нежелательно. Как я могу пересечь DOM, чтобы просто выбрать fieldSelector в текущем элементе списка? Любая помощь приветствуется.

Полный код:

$("button", "#newReportElement").click(function() { 
     $("#reportElements").append("<li class=\"ui-state-default\"> <span class=\"test ui-icon ui-icon-arrowthick-2-n-s \"></span><span class=\"ui-icon ui-icon-trash deleteRange \"></span> <select name=\"form[]\" class=\"formSelector\"><? foreach ($forms->result() as $row) { echo "<option value='$row->formId'>$row->name</option>"; }?></select><select class=\"fieldSelector\" name=\"field[]\"></select></li>");         
     $(".deleteRange").button(); 
     $('.formSelector').change(function() { 
      var id = $(this).val();  
      var url = "<? echo site_url("report/formfields");?>" + "/" + id; 
      var atext = "ids:"; 

      $.getJSON(url, 
       function(data){ 
        $.each(data.items, function(i,item){ 

        $(this).closest(".fieldSelector").append(
          $('<option></option>').val(item.formId).html(item.formLabel) 
         ); 
        }); 
       });  

     }); 
     return false; 
    }); 

Answer 1

this был потерян в градом функциях обратного вызова. Внутри обработчика change() храните ссылку на элемент списка, который первоначально инициировал событие, а затем ссылался на него с использованием замыканий.

Edit: .fieldSelector и .formSelector являются sibings и не родитель/ребенок. Поскольку ближайший старт смотрит вверх в иерархии, он ничего не найдет. Вместо этого используйте метод siblings.

$('.formSelector').change(function() { 
    var listItem = $(this).siblings(".fieldSelector"); 
    ... 
    $.getJSON(... 
     $.each(... 
      listItem.append(...); 
     ); 
    }); 
});  

Answer 2

Вы misunderstaning метод .closest.

Метод .closest возвращает самый внутренний родительский элемент, соответствующий селектору.

Кроме того, this в цикле .each будет ссылаться на текущий элемент в цикле.

Возможно, вы должны добавить var fieldSelector = $(something).find('.fieldSelector'), где something - это элемент, который содержит правильный код .fieldSelector.
Например, непосредственно внутри обработчика change, вы можете написать $(this).siblings('.fieldSelector').

Пожалуйста, покажите нам свой HTML.

Answer 3

«Ближайший» получит предка элемента, который поддерживает дерево. Так как «.fieldSelector» является родственным «.formSelector», попробуйте использовать „ряд“:

$(this).next(".fieldSelector")...