在 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、Test2、Test3

如何在 jQuery 中执行此操作？

Answer 1

您可以使用 jQuery 的 filter() 和 parents() 函数来完成。

你可以看看我的fiddle。

http://jsfiddle.net/ebilgin/9ov9kaaL/

编辑：供以后使用的代码：

$("#root").find("span").filter( function () {

    if ( $(this).parents("fieldset").length ) {

        if ( $(this).parents("fieldset").parents("fieldset").length ) { 

            return false;

        }

        return true;

    }

}).css("color", "#CCC");

Answer 2

var children = $('#root').children('div').children('span').css("background-color", "red" );

查看这个 jsbin：http://jsbin.com/yubafe/edit?html,js,console,output

Answer 3

这些选择器中的任何一个都适用于您现有的 HTML:

//selects spans of #root's first child:
$('#root > *:first span');  

//selects spans of #root's children that aren't fieldsets:
$('#root > :not(fieldset) span').css('background', 'yellow');

如果 fieldset 是第二个或第一个 child，则第二个将起作用。

片段：

$('#root > *:first span').css('color', 'red');

$('#root > :not(fieldset) span').css('background', 'yellow');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 4

我建议：

// 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>

参考文献：

Answer 5

您可以在代码中使用 css 伪 class :not 和 css class 来过滤 div:

HTML

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

jQuery

$("#root div:not(.filter) span").css("color","red");

你可以在这里测试：

http://jsfiddle.net/w6k2z9r4/1/

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

Finding first level child of a element type in any level in Jquery

javascript

jquery

jquery-selectors