仅选择子div，而不选择“孙子” div

Question

我具有一个在用户交互时将更多div递归地添加到HTML页面的功能。这些div表示对象，输入表示这些对象的属性。问题在于这些对象嵌套在彼此内部-我需要帮助的部分是仅选择子div的信息。我将尝试说明问题：

<div class="all">
    <div class="resource"> //lets call this resource "resource 1"
        <div class="method"> // this method as "method 1"
        <div class="method"> // this method as "method 2"
        <div class="resource"> // this resource as "resource 2"
            <div class="method"> // this method as "method 3"
    <div class="resource">
    <div class="resource">
...

我们有这个div“资源”，可以在其中找到另一个“资源”或“方​​法”。现在，问题是我必须在循环中选择only子div。示例：

我必须选择only资源1中的方法。

我尝试过的：

1. [使用CSS选择器选择它：

   resource1.querySelectorAll(".resource > .method")

但是这将返回所有三个方法（我只需要它返回直接嵌套在它下面的2个方法）。我相信发生这种情况是因为此选择器在“重新分配” divs下搜索所有“方法”中的div（并且由于所有这些嵌套的div具有相同的类名，因此无法区分它们）。

2. 使用html选择进行选择。例如：

   resource1.getElementsByClassName("method");

再次，我需要它仅向我返回直接位于document.getElementsByClassName（“ resource”）[0]下的方法（等于资源1），但是，它不仅向我返回直接位于其下的方法，而且还向我返回还有资源1中资源中找到的所有方法。

3. 使用Jquery：在寻找更多可能的解决方案时，我找到了以下Jquery行：

$('.resource').find('.method').first().siblings('.method').addBack().show()

但是我认为这不适用于我的情况。为此，我做到了所有主要资源（没有其他“资源”的子级的“资源” div）都具有className =“ primaryResource”。这样：

$('.primaryResource') //returns me all the primary resource divs. This works as intended.
$('.primaryResource')[0] //then returns me the first primary div, but
$('.primaryResource')[0].find('.method') or $('.primaryResource')[0].find('.resource') // does 
not return me anyhting, instead it catches Uncaught TypeError: $(...)[0].find is not a function

Answer 1

您需要Jquery对象才能应用查找：

$($('.primaryResource')[0]).find('.method')

Run

Answer 2

要仅强制执行顶层div，请执行以下操作...替换此

resource1.querySelectorAll(".resource > .method")

与此

resource1.querySelectorAll(".all > .resource > .method")

here is a sample fiddle.

Answer 3

document.querySelectorAll('.all > .resource:first-child > .method')

这将确保所选的<div>是<div class="all">元素的直接子代（而不是子代），并且仅选择第一个资源的方法。

Answer 4

第一个选择器非常接近。您正在检索直接在any资源下的所有方法。当然，您想在一种特定的资源下检索所有方法。

我不确定要选择哪个资源，但是如果要选择第一个资源，可以使用以下代码：

（普通javascript）

document.querySelectorAll('.resource:first-child > .method').forEach(function(el) {
  el.classList.add("selected");
});

$('.resource:first-child > .method').addClass("selected");

（jquery）

演示：https://jsfiddle.net/2bpfuge4/1/

(function() {
  document.querySelectorAll('.resource:first-child > .method').forEach(function(el) {
    el.classList.add("selected");
  });
})();

.resource,
.method {
  width: 100%;
  height: 50px;
  display: inline-block;
}

.resource {
  background-color: green;
  padding-left: 50px;
}

.method {
  background-color: red;
}

.selected {
  background-color: yellow;
}

<div class="all">
  <div class="resource">
    <div class="method"></div>
    <div class="method"></div>
    <div class="resource">
      <div class="method"></div>
    </div>
  </div>
  <div class="resource">
    <div class="method"></div>
    <div class="method"></div>
    <div class="resource">
      <div class="method"></div>
    </div>
  </div>
</div>

您可能需要选择其他元素。您可以使用：nth-​​child选择特定项目，或使用多个>选择器遍历元素树。