jQuery игнорирует последний элемент в возвращаемом наборе

Я работаю над внутренним плагином для jQuery dataTables, и я испытываю странное поведение.jQuery игнорирует последний элемент в возвращаемом наборе

Взгляните на следующую скрипке: http://jsfiddle.net/bJLLz/

ниже код ищет каждый «тр» первый элемента «TD», и добавляет еще один «» тд с входом флажка перед каждым матчем он находит. (Обратите внимание на последнюю строку в скрипке выше, не имеет флажок)

$(function() { 
    var checkBox = $('<input>', { 
     "type": "checkbox" 
    }) 
    var td = $('<td/>', { 
     'class': "table-checkbox" 
    }).insertBefore("tbody > tr > td:first-child") 

    var checkBoxes = $(checkBox).appendTo(td) 
    var th = $('<th/>', { 
     'class': 'text-center' 
    }).insertBefore("thead > tr:nth(0) > th:nth(0)") 

    $(checkBox).appendTo(th) 
     .change(function() { 
     $(this).is(":checked") ? checkBoxes.prop('checked', true) : checkBoxes.prop('checked', false); 
    }) 
})

Хотя Jquery добавляет соответствующий элемент «TD», последний «тд» в таблице добавляется, но без ввода флажок.

Это действительно неожиданно. Есть ли у кого-нибудь идеи, почему?

источник

2014-05-31 elad.chen

Я думаю, что более удивительно, что это работает? Вы не создаете новый флажок для каждой строки, но один флажок, который вы вставляете в каждую строку, и insertBefore должен делать что-то внутренне, что создает новый флажок для каждой строки, а не только перемещение того, который вы создали и т. Д.? – adeneo

@adeneo Вот как работает '.insertBefore()'. Он предназначен для копирования одного элемента в несколько мест. – JJJ

@Juhana - ну да, но это кажется мне неинтересным, я бы скорее сделал итерацию себя и сделаю это -> [** FIDDLE **] (http://jsfiddle.net/bJLLz/4/) – adeneo

Эта линия делает это:

$(checkBox).appendTo(th)

В отличие от .insertBefore(), .appendTo()движется элемент в новое положение. После всех других операций до этой строки checkBox ссылается на флажок в последней строке таблицы.

Вам нужно сделать копию этого флажка перед добавлением его:

$(checkBox).clone().appendTo(th)

Demo

источник

2014-05-31 12:38:08 JJJ

Спасибо, Это работает. С другой стороны, это лучший способ достичь этого результата? –

Эх, это так хорошо, как что угодно. Хотя я бы использовал ': first' вместо': nth (0) 'и': first-child'. – JJJ

Я не могу использовать: сначала, так как я должен найти каждый «tr»> td: first-child –

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

$(function() { 

    $('table').on('change', '.row-checkbox', function() { 
     $(this).closest('tr').toggleClass('highlighted', this.checked); 
    }); 

    $('table tr').each(function(){ 
     $(this).find('td,th').first().before(function() { 
      return '<td><input type="checkbox" class="row-checkbox"></td>'; 
     }); 
    }); 

});

Вот демо: http://jsfiddle.net/bJLLz/2/

источник

2014-05-31 12:44:39

Спасибо, я рассмотрю его использование. :) –

jQuery игнорирует последний элемент в возвращаемом наборе

ответ

Смежные вопросы