在嵌套的动态添加的 div 海洋中定位一个 div

Question

I'm using the liferay framework and I need to add a JavaScript detected inline height to a very very specific div in my page. The problem is I need to target it going through an unknown number of dynamically added divs with dynamically added classes and IDs. To complicate this even further, the divs are randomly siblings or nested in each other.

Here's what it looks like:

<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>

obviously I can't target it simply with

function resize() {

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

resize();

Because that class is present elsewhere, I would rather target it with something like.

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

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"

I was asking myself if there was any jQuery that could help. Something like:

Catch any div with .DIV-I-WANT-TO-TARGET class that is "generically" inside another div that has .known-class

Is this possible? thanks a lot for your help!

Answer 1

Something like this would work:

// 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

You can try in your css file

 .known-class div div div div{}

The last div being the DIV-I-WANT-TO-TARGET

Answer 3

Assuming that you are adding the divs starting from the outer to the inner

Assign an equal name plus a number starting from 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>

The use jQuery [.each][1] to loop through all the divs on the document

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

When you reach the last item in numeric order. (you can use any split function) add the attributes to that div

Answer 4

you need to select last div inside the known-class:

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

OR if you want to select all the .known-class :

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

Answer 5

Actually your selector works just fine:

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

With a space, selectors will find any descendant.

The search is only limited to direct descendants (immediate children) if you use the > operator.

So $('.known-class > .DIV-I-WANT-TO-TARGET') would not find what you wanted.