Выберите элементы вне другого определенного элемента
Я пытаюсь выбрать один или несколько элементов, которые НЕ являются потомками другого конкретного элемента.
<html>
<body>
<div>
<p>
<b>
<i> don't select me </i>
</b>
</p>
</div>
<div>
<i>don't select me either </i>
</div>
<i> select me </i>
<b>
<i> select me too </i>
</b>
</body>
</html>
В приведенном выше примере я хочу выбрать все элементы 'i', которые не находятся внутри элементов div. Обратный путь был бы легок, с ('div i'), но использовать это в:not() невозможно.
Как я могу выбрать все элементы i за пределами элементов div? Часто предлагается использовать jQuery, который будет выглядеть так:
nondiv_i = all_i.not(all_div.find("i"))
Я не могу использовать jQuery, но могу использовать jqLite - у jqLite нет функции not (). Решение jqLite также приветствуется! Возможно ли это сделать без повторных итераций и сравнений?
Изменить: чтобы уточнить, я не хочу иметь каких-либо div-предков для моих i-элементов, не только не прямые div-родители.
Подобный XPath будет выглядеть так:
//i[not(ancestor::div)]
2 ответа
function isDescendant(parent, child) {
var all = parent.getElementsByTagName(child.tagName);
for (var i = -1, l = all.length; ++i < l;) {
if(all[i]==child){
return true;
}
}
return false;
}
для вашего конкретного случая;
is = document.getElementsByTagName("i");
divs = document.getElementsByTagName("div");
nondivs = [];
var contains;
for(i=0;i<is.length;i++){
contains = false;
for(j=0;j<divs.length;j++){
if(isDescendant(divs[j],is[i])){
contains = true;
j = divs.length;
}
}
if(!contains){
nondivs.push(is[i]);
}
}
Добавить класс ко всем <i> теги (например, "itag"). Оттуда вы можете получить их, позвонив getElementsByClassName:
var r = document.getElementsByClassName("itag");
console.log("length" + r.length);
Затем вы можете получить их по индексу:
console.log(r[0]);
console.log(r[1].innerHTML); // get text of i tag