Тестирование существующего элемента с помощью jQuery. length не позволяет увидеть вновь созданные элементы
Я пытаюсь создать систему копирования / вставки для таблицы HTML с помощью jQuery и плагина контекстного меню, и я пытаюсь однозначно назвать все вновь созданные строки. Поэтому у меня есть функция, которая клонирует выбранную строку и вставляет новую строку выше:
function cloneAbove(TR) {
var newRow = $(TR).clone();
var lastID = $(TR).attr('id');
var newID = Number(lastID.substring(3))-0.1;
//See if that row already exists:
if($('#tr_'+newID).length){
alert('#tr_'+newID+' Exists');
//If it does exist, we divide the newID by 10 until we find one that doesn't:
var i = 0;
while(i < 1){
newID = newID/10;
if($('#tr_'+newID).length > 0){
i = 1;
}
}
}
$(newRow).attr('id','tr_'+newID);
$(TR).before(newRow);
$(".target").contextmenu(option);
}
Сначала он клонирует выбранную строку (т. е.: '#tr_1'), вычитает 0.1 для идентификатора новой строки (т. е.: '#tr_0. 9'), затем он должен проверить, существует ли этот идентификатор уже - вот где моя проблема - если он существует, он входит в цикл делить на 10 до тех пор, пока он не найдет идентификатор, который этого не делает.
Вот пример таблицы:
<table id="table" border=1>
<tr class="target" id="tr_1" oncontextmenu="context('tr1')">
<td id="tr_1_1">Row1</td>
<td id="tr_1_2">Row1</td>
</tr>
<tr class="target" id="tr_2" oncontextmenu="context('tr2')">
<td id="tr_2_1">Row2</td>
<td id="tr_2_2">Row2</td>
</tr>
</table>
The .длина работает для "жестко закодированных" элементов, как они существуют, когда страница загружается, но он не будет обнаруживать ни один из вновь созданных элементов. Есть предложения?
2 ответа:
Вы создаете значения "id", которые сбивают с толку jQuery. Селектор "#tr_0. 9 "означает" найти элемент с идентификатором 'tr_0' и классом '9'", а не"найти элемент с идентификатором'tr_0.9'".
Оставляя в стороне тот факт, что это кажется мне довольно странным способом построения значений "id", вы можете заставить его работать, "цитируя"."символы:
if ($(('#tr_' + newId).replace(/\./g, "\\.")).length) { // ... found a duplicate ...
То, что это делает, является заменой "." для "."в построенном пробном значении" id". Вы только хотите сделать это, конечно, когда поиск элементов через селектор jQuery; вы не хотите, чтобы фактическое значение " id " имело обратные косые черты.
В качестве альтернативы вы можете заменить ".- символы с буквой " _ " или что-то в этом роде.
Вам нужно подумать о том, как ваш селектор jQuery анализируется. Когда вы добавляете новую строку, Ваш идентификатор новой строки устанавливается в десятичную цифру (т. е. '0.9'). Но при использовании селектора jQuery
$('#tr_0.9')
вы говорите:Получаем элемент A с идентификатором 'tr_0' и класс "9".
Оператор точки является обозначением для селектора класса. Попробуйте использовать целые числовые значения вместо десятичных.
Edit: я был слишком медленным!