Ориентация на div в океане вложенных динамически добавленных divs

Question

Я использую фреймворк liferay, и мне нужно добавить обнаруженную javascript встроенную высоту очень очень конкретному div на моей странице. Проблема в том, что мне нужно настроить таргетинг на неизвестное количество динамически добавленных div с динамически добавленными классами и идентификаторами. Чтобы усложнить это еще дальше, divs являются случайными братьями или сестрами или вложены друг в друга.

вот как это выглядит:

<div class="known-class"> 
<div class="unknown dynamicallygenerated"></div> 
<div class="unknown dynamicallygenerated"> 
    <div class="unknown dynamicallygenerated"> 
     <div class="unknown dynamicallygenerated"></div> 
     <div class="unknown dynamicallygenerated"> 
      <div class="DIV-I-WANT-TO-TARGET">this is the div i need to target with my css/javascript</div> 
     </div> 
    </div> 
</div> 

, очевидно, я не могу предназначаться его просто с

function resize() { 

    var heights = window.innerHeight; 
    jQuery('.DIV-I-WANT-TO-TARGET').css('height', heights + "px"); 
} 

resize(); 

, потому что класс присутствует в другом месте, я бы скорее цель его что-то вроде

jQuery('.known-class .DIV-I-WANT-TO-TARGET') 

, который, очевидно, не работает, потому что в середине есть тонна других divs, а мой div не является дочерью «.known-class»

Я спрашивал себя, есть ли какой-нибудь jQuery, который мог бы помочь. что-то вроде:

зацепиться сНом с классом .div-I-ХОЧЕТ-TO-TARGET, который "обобщенно" в другой DIV, который .known-класс

это возможно? большое спасибо за вашу помощь!

Answer 1

Что-то, как это будет работать:

// this will target the known-class and find all children with DIV-I-WANT-TO-TARGET 
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET'); 

// this will target the known-class and find the first DIV-I-WANT-TO-TARGET 
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').first(); 
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:first'); 
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:eq(0)'); 
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').eq(0); 

Answer 2

Вы можете попробовать в вашем файле CSS

.known-class div div div div{} 

Последние ДИВ быть DIV-I-ХОТЯТ-TO-TARGET

Answer 3

Предполагая что вы добавляете divs, начиная с внешнего на внутренний

Назначьте равное имя плюс число, начинающееся от 1

<div class="known-class"> 
    <div class="unknown dynamicallygenerated" id="dynamicdiv1"></div> 
    <div class="unknown dynamicallygenerated" id="dynamicdiv2"> 
     <div class="unknown dynamicallygenerated" id="dynamicdiv3"> 
      <div class="unknown dynamicallygenerated" id="dynamicdiv4"></div> 
       <div class="unknown dynamicallygenerated" id="dynamicdiv5"> 
       <div class="DIV-I-WANT-TO-TARGET" id="dynamicdiv6"></div> 
     </div> 
    </div> 
</div> 

Использование JQuery [.each] [1], чтобы перебрать все дивы на документе

$(document.body).click(function() { 
    $("div").each(function(i) { 
    if (this.style.color !== "blue") { 
     this.style.color = "blue"; 
    } else { 
     this.style.color = ""; 
    } 
    }); 
}); 

Когда вы дойдете до последнего пункта в числовом порядке. (Вы можете использовать любую функцию разделения) добавить атрибуты для этого DIV

Answer 4

вам нужно выбрать последний DIV внутри известного класса:

$('.known-class').find('div:last').css('background', 'Red') 

ИЛИ если вы хотите, чтобы выбрать все .known-класс:

$('.known-class').each(function() {$(this).find('div:last').css('background', 'Red')}); 

Answer 5

на самом деле ваш селектор работает просто отлично:

$('.known-class .DIV-I-WANT-TO-TARGET') 

с пространством, селекторы найти любой потомок.

Поиск только ограничивается прямыми потомками (непосредственные дети), если вы используете оператор >.

Так $('.known-class > .DIV-I-WANT-TO-TARGET') не найти то, что вы хотели.