javascript - 在 Jquery 的任何级别中查找元素类型的第一级子级

Question

我正在尝试查找任意深度元素的一级子元素。

例如，我有一个 fieldset 元素，它有一些包含其他 fieldset 元素的子元素；我只想找到那些在第一个字段集中而不在第二个字段集中的元素。

换句话说，我想要父字段集的所有子项，而不是任何嵌套字段集中的那些子项。

给定这个 HTML:

<fieldset id='root'>
    <div>
       <div>
          <span>Test1</span>
          <span>Test2</span>
       </div>
       <span>Test3</span>
    </div>
    <fieldset>
       <div>
           <span>Test4</span>
           <span>Test5</span>
           <span>Test6</span>
       </div>
    </fieldset>
</fieldset>

然后我执行 $("#root").find("span") 并找到所有跨度，但我只想找到 Test1，测试2,测试3

我如何在 jQuery 中执行此操作？

Answer 1

我建议:

// select the elements you want to find,
// use filter() to filter out the elements you don't want:
$('span').filter(function() {

  // if the closest ancestor <fieldset> element to
  // the <span> you're looking for has the id of 'root'
  // this evaluates to true (is() returns a Boolean);
  // if the evaluation is true the current element is retained
  // in the collection, if false it's discarded:
  return $(this).closest('fieldset').is('#root');

// using css() to style the retained elements for verification:
}).css('color', 'red');

$('span').filter(function() {
  return $(this).closest('fieldset').is('#root');
}).css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <fieldset id='root'>
    <div>
      <div>
        <span>Test1</span>
        <span>Test2</span>
      </div>
      <span>Test3</span>
    </div>
    <fieldset>
      <div>
        <span>Test4</span>
        <span>Test5</span>
        <span>Test6</span>
      </div>
    </fieldset>
  </fieldset>
</form>

引用资料:

• closest() .
• css() .
• filter() .
• is() .