时间戳

首页 > 解决方案 > 只选择子 div，而不是“孙子”div

javascript - 只选择子 div，而不是“孙子”div

问题描述

我有一个函数可以在用户交互时递归地将更多 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 “资源”，在其中可以找到另一个“资源”或“方​​法”。现在，问题是我必须在循环中只选择子 div。例子：

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

我试过的：

  1. 使用 css 选择器选择它：

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

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

  1. 使用 html 选择来选择它。例如：

    resource1.getElementsByClassName("method");

再次，我需要它只返回 document.getElementsByClassName("resource")[0] 正下方的方法（等于资源 1），但相反，它不仅返回它正下方的方法，还返回所有在资源 1 中的资源中找到的方法。

  1. 使用 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

标签： javascriptjqueryhtmlselector

解决方案

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

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

（纯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 选择特定项目，或使用多个 > 选择器来遍历元素树。

推荐阅读