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遍历问题

回答

相关问题