JQuery возвращает два элемента для каждого он находит? - PullRequest
Новая
       5

JQuery возвращает два элемента для каждого он находит?

1 голос
/ 11 июня 2010

Начну с того, что я довольно новичок в jQuery.По большей части, я нашел его интуитивно понятным и мощным, но это одно обстоятельство поставило меня в тупик.

В следующем методе вызов .each() возвращает два элемента для каждого найденного.Он выполняет итерацию по набору строк таблицы с указанными идентификаторами, начинающимися со слова «связь», за которыми следует идентификационный номер.Для каждой возвращаемой строки она обрабатывается дважды.

Используя 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>

Ответы [ 4 ]

3 голосов
/ 11 июня 2010

У меня два предложения - помогают ли они, кто знает.:)

Сначала используйте более лаконичный селектор, например, $("tr[id^=communication]").Это будет намного быстрее.

Во-вторых, рассмотрите возможность добавления класса к вашим tr элементам.Это также будет намного быстрее.Это повлечет за собой изменение: 

<tr id="...">

, например, 

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

Таким образом, ваш селектор для list может быть $("tr.comm-row").

Это не сразу очевидномне почему вы получаете дубликаты, но, возможно, приведенные выше предложения не только ускорят код, но и дадут некоторое представление о том, почему происходят дубликаты.

Настройка точки останова в цикле each может дать некоторое представление(т. е. что равняется this на каждой итерации).

Надеюсь, это поможет.

3 голосов
/ 11 июня 2010

Что дает alert($('[id^=communication]').length);? Вы уверены, что у предка таблицы нет идентификатора, начинающегося с связи?

Вы можете использовать $('#commTable > tr[id^=communication]'), чтобы быть очень специфичным

1 голос
/ 11 июня 2010

попробуй 

var list = $('[id^=communication]').find('td');
0 голосов
/ 04 декабря 2012

Я не знаю, ответит ли это на ваш вопрос, но я столкнулся с аналогичной проблемой с динамически генерируемыми таблицами.

Я использую выбираемый пользовательский интерфейс jQuery и создал таблицу изображений на основефлаг статуса.Однако HTML-строка, которую я передал jQuery для вставки, была чем-то вроде 

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

. Firefox знал, что я имел в виду, и вставлял только один тег изображения.Однако в IE (7, 8) я видел что-то вроде 

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

Проверьте HTML в инструментах разработчика для вашего браузера.Возможно, вы вставляете вдвое больше элементов, чем думаете.

...