在嵌套的動態添加的 div 海洋中定位一個 div

Question

我正在使用 liferay 框架，我需要將 JavaScript 檢測到的行內高度添加到我頁面中非常非常具體的 div 中。 問題是我需要通過未知數量的動態添加的 div 和動態添加的類和 ID 來定位它。 更復雜的是，這些 div 是隨機的兄弟或相互嵌套。

這是它的樣子：

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

這顯然不起作用，因為中間有很多其他 div，而我的 div 不是“.known-class”的孩子

我在問自己是否有任何 jQuery 可以提供幫助。 類似的東西：

使用.DIV-I-WANT-TO-TARGET類捕獲任何 div， .DIV-I-WANT-TO-TARGET “一般”位於另一個具有.known-class div 中

這可能嗎？ 非常感謝您的幫助！

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 是 DIV-I-WANT-TO-TARGET

Answer 3

假設您正在添加從外部到內部的 div

分配一個相同的名稱加上一個從 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] 循環遍歷文檔上的所有 div

$( 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-class ：

$('.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')不會找到你想要的。