在嵌套的动态添加的 div 的海洋中定位 div答案

【问题标题】：targeting a div in an ocean of nested dynamically added divs在嵌套的动态添加的 div 的海洋中定位 div
【发布时间】：2013-11-27 14:23:06
【问题描述】：

我正在使用 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 类“一般”在另一个具有.known-class 的div 中捕获任何div

这可能吗？非常感谢您的帮助！

【问题讨论】：

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" - 错误，因为那里没有子选择器，所以它会起作用，所以这只会影响嵌套在 @987654327 内的 ('.DIV-I-WANT-TO-TARGET') @
jQuery('.known-class .DIV-I-WANT-TO-TARGET') - 这会工作（虽然如果你在你的类名中使用破折号就不行！）。这会找到任何后代，而不仅仅是孩子。
任何具有 .DIV-I-WANT-TO-TARGET 类的 div “一般”在另一个具有 .known-class 的 div 中 是您发布的第二件事
您已经在自己的问题中得到了答案..
帮我们清理所以你可以删除帖子:)

标签： javascript jquery html css

【解决方案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);

【讨论】：

【解决方案2】：

你可以试试你的css文件

 .known-class div div div div{}

最后一个 div 是 DIV-I-WANT-TO-TARGET

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

您需要选择已知类中的最后一个 div：

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

或者如果你想选择所有的 .known-class ：

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

【讨论】：

【解决方案5】：

实际上你的选择器工作得很好：

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

使用空格，选择器将找到任何后代。

如果您使用> 运算符，则搜索仅限于直系后代（直系子代）。

所以$('.known-class > .DIV-I-WANT-TO-TARGET') 找不到你想要的。

【讨论】：