在嵌套的动态添加的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不是"的子代；。已知类"；

我在问自己是否有jQuery可以提供帮助。类似于：

捕获具有CCD_ 1类的任何div；一般地"；在另一个具有.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').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')不会找到你想要的。