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

Question

首先我要说的是我对 jQuery 相当陌生。在大多数情况下，我发现它直观且强大，但这种情况让我彻底难住了。

在下面的方法中，对 .each() 的调用为每个找到的元素返回两个元素。它迭代一组给定 ID 的表行，这些 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;
}

在返回通信时，返回的数组将包含表行数两倍的元素。

我应该注意到，几乎相同的代码（但与特定的 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

我有两个建议——是否有帮助，谁知道呢。 :)

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

其次，考虑只向 tr 元素添加一个类。这也会快得多。这需要将： 更改

<tr id="...">

为，例如

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

这样您的 list 选择器就可以是 $("tr.comm-row")。

对我来说，为什么会出现重复项并不是很明显，但也许上述建议不仅会加快代码速度，而且会提供一些关于重复发生原因的见解。

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

希望有帮助。

Answer 3

尝试

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

Answer 4

我不知道这是否能回答您的问题，但我在动态生成的表中遇到了类似的问题。

我正在使用 jQuery 可选择 UI，并根据状态标志制作了一个图像表。然而，我传递给 jQuery 来插入的 HTML 字符串与 Firefox 类似，它

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

知道我的意思，并且只插入了一个图像标签。 看到类似“

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

然而，在 IE (7, 8) 中，我在浏览器的开发人员工具中 检查 HTML”的内容。您插入的元素数量可能是您想象的两倍。