нацеливание div в океане вложенных динамически добавленных div

0

Я использую фреймворк 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 с классом.DIV-I-WANT-TO-TARGET, который является "общим" внутри другого div, который имеет.known-class

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

  • 1
    which obviously doesn't work because there's a ton of other divs in the middle and my div is not a child of ".known-class" - неправильно, это будет работать, потому что у вас нет дочернего селектора, так что это повлияет только на ( '.DIV-I-WANT-TO-TARGET'), который вложен в known-class
  • 0
    jQuery('.known-class .DIV-I-WANT-TO-TARGET') - Это будет работать (хотя нет , если вы используете тир в именах классов!). Это находит любой потомок, а не только дети.
Показать ещё 5 комментариев
Теги:

5 ответов

3

Что-то вроде этого будет работать:

// 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);
Поделиться
0

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

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

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

$('.known-class').each(function() {$(this).find('div:last').css('background', 'Red')});
Поделиться
0

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

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

С пробелом селектора найдут любого потомка.

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

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

Поделиться
0

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

 .known-class div div div div{}

Последний div - это DIV-I-WANT-TO-TARGET

Поделиться
0

Предполагая, что вы добавляете 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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню