如何在 JavaScript 中定位迭代对象的子元素？

Question

在这种情况下，我只想定位具有 thead 标签的表。

我尝试使用更快的 JavaScript 或 jQuery 进行连接或搜索。

例如thead = DT[i].children('thead');

function go() {
  var i = 0,
    DT = document.getElementsByClassName('DT');
  for (i; i < DT.length; ++i) {
    var x = DT[i];

    if ($(x + ' thead').length) {
      //do stuff to this table
    }
  }
}

<table class="DT" id="gv1">
  <tbody>
    <tr>
      <th>th</th>
    </tr>
    <tr>
      <td>td</td>
    </tr>
  </tbody>
</table>

<table class="DT" id="gv2">
  <thead>
    <tr>
      <th>thead</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
    </tr>
  </tbody>
</table>

Answer 1

你不需要任何循环，你可以使用 jQuery 的:has() 选择器根据元素是否包含指定的子元素来检索它，像这样：

function go() {
  $('.DT').has('thead').addClass('foo');
}

go();

.foo { border: 1px solid #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="DT" id="gv1">
  <tbody>
    <tr>
      <th>th</th>
    </tr>
    <tr>
      <td>td</td>
    </tr>
  </tbody>
</table>

<table class="DT" id="gv2">
  <thead>
    <tr>
      <th>thead</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用querySelector 来检查嵌套的thead 是否存在。

if (x.querySelector("thead")) {
  //do stuff to this table
}

你知道，你这样做是为了完成你最初尝试的事情：

if ($(x).find("thead").length) {
  //do stuff to this table
}

这只是为了展示如何从给定的上下文中执行 DOM 选择。