jQuery为它找到的每个元素返回两个元素？

Question

我会开始说我对jQuery相当陌生。在大多数情况下，我发现它很直观和强大，但这种情况让我彻底难倒了。

在以下方法中，对.each()的调用返回找到的每个元素的两个元素。它迭代了一组表格行，给出了以“communication”开头的ID，后面跟着一个ID号码。对于它返回的每一行，它会处理两次。

使用Firebug，我已验证DOM只有每个表格行的单个实例。还使用Firebug，我已验证该方法未被调用两次; .each()中的迭代真正遍历每个返回的表行两次。当所有的AJAX调用完成时，我将在数据库中为表中创建的每一行创建两个条目。

这是造成问题的代码：

function getCommunications() { 
    var list = $('[id^=communication]'); 
    var communications = new Array(); 
    list.each(function() { 
     var communication = { 
      ID: $(this).find('.commCompanyID').val(), 
      /* 
      * SNIP: more object properties here that are 
      * unnecessary to this discussion 
      */ 
     }; 
     communications.push(communication); 
    }); 
    return communications; 
} 

截至return communications点，返回包含两倍多的元素，也有表行的阵列。

我应该注意，几乎相同的代码（但与特定的div列表不同）正在同一页面上工作。这只是桌子上的问题。

我使用jQuery 1.4.1，它随Visual Studio .NET中的2010年版

表格标记是完全动态的 - 那就是，除了标题行，它是依赖于数据或者在页面加载时返回或由用户通过对话框创建。我只会介绍页面加载时创建的代码;再次使用Firebug我已经验证了当最终用户使用对话框匹配创建行时，我动态创建的内容。 （这应该是任何人读取，但备案，这是一个ASP.NET MVC 2.0项目。）

<table id="commTable"> 
    <tr> 
     <th></th> 
     <th> 
      Date/Time 
     </th> 
     <th> 
      Contact 
     </th> 
     <th> 
      Type 
     </th> 
     <th> 
      Duration 
     </th> 
     <th> 
      Notes 
     </th> 
    </tr> 
<% foreach (var item in Model) { %> 
    <tr id="communication<%: item.ID %>"> 
     <td> 
      <a href="#" onclick="showEditCommunicationForm(<%: item.ID %>"> 
       Edit</a> 
      <span class="commDeleteButton"> 
       <a href="#" onclick="deleteCommunication(<%: item.ID %>)"> 
        Delete</a> 
      </span> 
     </td> 
     <td> 
      <span class="commDateTime"><%: item.DateTime %></span> 
      <input type="hidden" class="commID" value="<%: item.ID %>" /> 
      <input type="hidden" class="commIsDeleted" 
       value="<%: item.IsDeleted %>" /> 
     </td> 
     <td> 
      <span class="commSourceText"><%: item.Company.CompanyName %></span> 
      <input type="hidden" class="commCompanyID" 
       value="<%: item.CompanyID %>" /> 
     </td> 
     <td> 
      <%: item.CommunicationType.CommunicationTypeText %> 
      <input type="hidden" class="commTypeID" 
       value="<%: item.CommunicationTypeID %>" /> 
     </td> 
     <td> 
      <span class="commDuration"><%: item.DurationMinutes %></span> 
      Minutes 
     </td> 
     <td> 
      <span class="commNotes"><%: item.Notes %></span> 
     </td> 
    </tr>  
<% } %> 
</table> 

Answer 1

alert($('[id^=communication]').length);给你什么？你确定桌子的祖先没有以通信开始的ID吗？

你可以使用$('#commTable > tr[id^=communication]')是非常具体

Answer 2

尝试

var list = $('[id^=communication]').find('td'); 

Answer 3

我有两个建议 - 无论他们帮忙，谁知道。 :)

首先，使用更简洁的选择器，即$("tr[id^=communication]")。这将是更快。

其次，考虑只为您的tr元素添加一个类。这也将是更快。这将需要改变：

<tr id="..."> 

，例如，

<tr id="..." class="comm-row"> 

这样，你的list选择可以$("tr.comm-row")。

我不明白为什么你会得到重复，但也许上述建议不仅会加速代码，还会提供一些有关重复发生的原因。

在each循环中设置断点可能会提供一些见解（即，每次迭代时this的值是什么）。

希望有所帮助。

Answer 4

我不知道这是否会回答你的问题，但我遇到了与动态生成的表类似的问题。

我使用jQuery可选择的用户界面，并根据状态标志制作了一张图像表。然而，我传递给jQuery插入的HTML字符串是沿着行的

<img src="images/imageIwant" class="classIwant"></img> 

Firefox知道我的意思，只插入一个图像标记。但是，在IE（7,8）中，我看到类似于

<img ... /> 
</img/> 

请检查浏览器开发人员工具中的HTML。你可能会插入两倍于你想象的元素。