jquery - DOM遍歷問題

基本上我在這裏有一個按鈕，它將一個新的列表項添加到一個無序列表中。在這個列表項中有一個下拉框（.formSelector），當更改觸發ajax調用以獲取同一列表項中另一個下拉框（.fieldSelector）的值時。jquery - DOM遍歷問題

的問題是在這條線：

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

如果我正確的第二個框將更新其更改爲

$(".fieldSelector").append(

。這樣做的問題是，當我有多個列表項時，它會使用類fieldSelector更新頁面上的每個下拉框，這是不可取的。我如何遍歷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; 
    });

來源

2010-04-25 David

this已經在回調函數的攻勢已經丟失。在您的change()處理程序中，存儲對最初啓動事件的列表元素的引用，然後稍後使用閉包引用它。

編輯： .fieldSelector和.formSelector是sibings而不是父/子。由於最近開始在層次結構中向上看，因此它不會找到任何東西。而應使用siblings方法。

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

來源

2010-04-25 18:30:47 Anurag

完美。謝謝！ – David 2010-04-25 19:08:18

很高興爲你效勞。乾杯! – Anurag 2010-04-25 22:10:12

你misunderstaning的.closest方法。

.closest方法將返回與選擇器匹配的最內層父元素。

另外，在.each循環內的this將引用循環中的當前項目。

您應該添加var fieldSelector = $(something).find('.fieldSelector')，其中something是包含正確的.fieldSelector的元素。
例如，直接裏面的change處理程序，你可以寫$(this).siblings('.fieldSelector')。

請向我們展示您的HTML。

來源

2010-04-25 18:21:14 SLaks

「最接近」會得到樹的備份元素祖先。由於「.fieldSelector」是「.formSelector」的兄弟姐妹，請嘗試使用‘下一步’：

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

來源

2010-04-25 18:23:07 BradBrening

jquery - DOM遍歷問題

回答

相關問題