В js новичок как и в jquery. Поработав в нем создалось представление об этом фреймворке поправьте если что не так. В jquery есть селекторы которые упрошают доступ к DOM (взамен стандартных getElementById, getElementsByTagName но так как это просто библиотека то доступ по селекторам так же основан на них и так же занимает относительно много времени). С помощью селектора возвращается объект который содержит массив стандартных JS элементов, но так же у этого объекта есть свои методы которые и следует использовать для работы с DOM.
Вот задание с которым мучаюсь.
Есть таблица одно поле из которых список элементов в который по возможности необходимо добавлять элементы и делать это так что бы элементы не повторялись, так же пользователь имеет возможность добавить строку в таблицу
Вот как я решал эту задачу
Я создал "корневой" список который содержит все элементы, а ячейки таблицы будут копиями с нее:
<select id='allelems_a' style="{display:none}" onchange="show_modal_first(this)">
<option value="пример строки 1">пример строки 1</option>
<option value="пример строки 2">пример строки 2</option>
<option value="пример строки 3">пример строки 3</option>
<option value="пример строки 4">пример строки 4</option>
<option value="add">Добавить новый элемент</option>
В функции show_modal_first() вызываю модальное окно в котором и происходит добавление нового элемента (для этого пользуюсь плагином SimpleModal)
Описываю событие кнопки добавления строки в таблицу (добавляю строку и в один из рядов добавляю копию списка)
var allelements = $('#allelems_a')[0];
var allelementsnew = allelements.cloneNode(true);
$(allelementsnew).attr("id", 'newpar_'+newcnt);
$(allelementsnew).css("display", '');
var td2 = row2.insertCell(-1);
td2.appendChild(allelementsnew);
Функция добавления элемента в списки (невидимый, видимые)
var allelms = $("#allelems_a");
var new_el = document.createElement("option");
var ad_el = $('#allelems_a option');
ad_el = ad_el[ad_el.length - 1];
$(new_el).attr("value", elem);
$(new_el).attr("innerHTML", elem);
ad_el.parentNode.insertBefore(new_el, ad_el);
var rws = $('#paramtable tr');
var cls;
var sel_index;
var id_tmp;
var i;
for(i = 1; i < rws.length; i++) {
new_el = document.createElement("option");
$(new_el).attr("value", el);
$(new_el).attr("innerHTML", el);
cls = rws[i].getElementsByTagName('td');
sel_index = cls[1].childNodes[0];
id_tmp = sel_index[sel_index.length - 1];
sel_index.insertBefore(new_el, id_tmp);
}
А теперь то что "глючит": есть функция которая проверяет, есть ли элемент из массива в невидимом списке
function test_ar_sel() {
var arr_sel: ['str1', 'str2', 'str5', 'str48'];
var quer = '#allelems_a option';
for(i = 0; i < arr_sel.length; i++) {
quer = quer + '[value="'+arr_sel[i]+'"]';
if (i+1 !== arr_sel.length) {
quer = quer + ',';
}
}
var allelms2 = $(quer);
if (allelms2.length > 0) {
alert(allelms2.length);
for(i = 0; i < allelms2.length; i++) {
alert(allelms2[i].value);
}
}
и в результирующем объекте allelms2 содержатся элементы не только из невидимого списка но и из видимых. Хотя убрав составной селектор, возвращаются только элементы из невидимого списка
