Как найти родительский элемент дочернего элемента по классу - JQuery

Question

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

Вот что я пытаюсь сделать:

<div class="parent"> 
    <span class="random"> 
     <span class="child"> 

Я хочу изменить содержание .innerHTML в «ребенок», только если ребенок обладает родителя (не сразу) родительский класс которого является «родителем».

Я точно знаю, что класс «ребенок» будет существовать, но я НЕ знаю, существует ли на странице «родительский» класс.

Может быть несколько элементов класса «ребенок» и может быть несколькими «родительскими» элементами класса. Если у какого-либо из «детских» детей есть «родитель», все они должны действовать.

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

Я ожидаю поведение что-то вроде этого, но, очевидно, что этот код не прав:

var children = document.getElementsByClass('child'); 

foreach(children as child){ 
    if (child.hasParent(.parent)){ 
     child.innerHTML = "New Text"; 
} 

1. Что такое правильный способ сделать это, и
2. Как предотвратить проблемы, если не является ли «родительский» элемент на странице?

Answer 1

Вы можете использовать document.querySelectorAll(), чтобы найти все элементы с классом «ребенок», которые имеют родителей с классом «родителя»:

var children = document.querySelectorAll(".parent .child"); 

Это дает Вам список узлов, которые соответствуют, возможно, пустой список:

for (var i = 0; i < children.length; ++i) 
    children[i].innerHTML = "New Text"; 

.querySelector() и querySelectorAll() методы работы (в основном), даже в IE8, так что этот подход является довольно универсальным.

Поскольку вы помечено вопрос с JQuery, вы можете сделать это с этой библиотекой тоже:

$(".parent .child").html("New Text"); 

Это обновит все элементы «ребенок» с «родительским» родительским узлом; jQuery выполняет всю итерацию для вас.

Answer 2

В JQuery

$(".parent .child").html("New Text"); 

Это изменит содержание HTML любых .child элементов, но только если они имеют родителя .parent - не только прямой родитель.

Answer 3

Более короткий код в Vanilla JS:

var children = document.querySelectorAll(".parent .child"); 
[].forEach.call(children, function(elem){ 
    elem..innerHTML = "New Text"; 
}); 

Answer 4

Если вы на самом деле не хотите, чтобы вставить текст, когда .parent является непосредственным родителем. Это одна операция, где JQ может все еще иметь что-то на querySelector, хотя шансы хорошие, возможно, что-то вроде css querySelector поддерживает, о котором я забываю.

$('.parent .child').not('.parent > .child').html('stuff'); 

Если вы когда-нибудь понадобится, чтобы определить, какие неоперативную .parent родительские узлы вы можете сделать это:

$('.child').parent().parents('.parent'); 
//or ... '.parent:first'); just for the first one it finds. 

О, и одна вещь, которая может помочь производительности справедливый бит, чтобы добавить тег HTML если на него можно положиться, например

$('div.parent p.child'); 

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