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

我建议：

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

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

你可以看看我的小提琴。

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");

这些选择器中的任何一个都可以使用现有的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是第二个或第一个子级，则第二个将起作用。

代码段：

$('#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>

您可以在代码中使用css伪类：not和css类来过滤该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/