代码之家  ›  专栏  ›  技术社区  ›  John Rudy

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

  •  1
  • John Rudy  · 技术社区  · 14 年前

    在以下方法中,调用 .each()

    .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列表相反)在同一页上工作。只是桌子出了问题。

    我使用的是jQuery1.4.1,这是VisualStudio.NET2010附带的版本。

    表标记是完全动态的——也就是说,除了标题行之外,它还依赖于页面加载时返回的数据或用户通过对话框创建的数据。我将直接输入页面加载时创建的代码;再次使用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>
    
    4 回复  |  直到 14 年前
        1
  •  3
  •   Matt John Wright    14 年前

    是什么 alert($('[id^=communication]').length);

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

        2
  •  3
  •   Matt John Wright    14 年前

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

    第二,考虑在你的应用程序中添加一个类 tr 许多的 更快。这将需要改变:

    <tr id="...">
    

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

    这样你就可以选择 list 可以是 $("tr.comm-row")

    我现在还不清楚为什么会出现重复的代码,但是上面的建议可能不仅可以加快代码的速度,还可以帮助我们理解为什么会出现重复的代码。

    在中设置断点 each this 在每次迭代中相等)。

    希望有帮助。

        3
  •  1
  •   jAndy    14 年前

    尝试

    var list = $('[id^=communication]').find('td');
    
        4
  •  0
  •   Caleb    12 年前

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

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

    Firefox知道我的意思,只插入了一个图像标签。然而,在IE(7,8)中,我看到了

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

    在浏览器的开发工具中检查HTML。有可能您插入的元素是您认为的两倍。