Question

我试图找到任何深度的元素的第一级孩子。

例如，我有一个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

我建议：

// 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');

＆＃13;

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

＆＃13;

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

＆＃13;

参考文献：

Answer 2

您可以使用jQuery的>>> from django.db.models import Sum >>> MyModel.objects.values('date').annotate(total_length=Sum('length'))和package org.scribe.examples; import java.util.*; import org.scribe.builder.*; import org.scribe.builder.api.*; import org.scribe.model.*; import org.scribe.oauth.*; public class WooCommerceOauth1Example { private static final String RESOURCE_URL = "http://WEBSITE.COM/wc-api/v1/orders"; public static void main(String[] args) { OAuthService service = new ServiceBuilder().provider(OneLeggedApi10.class) .apiKey("ck_SOME_NUMBER") .apiSecret("cs_SOME_NUMBER") .build(); // Now let's go and ask for a protected resource! System.out.println("Now we're going to access a protected resource..."); OAuthRequest request = new OAuthRequest(Verb.GET, RESOURCE_URL); //Since it is a one legged protocol, access token is empty.Right? service.signRequest(new Token("", ""), request); Response response = request.send(); System.out.println("Got it! Lets see what we found..."); System.out.println(); System.out.println(response.getCode()); System.out.println(response.getBody()); System.out.println(); System.out.println("Thats it man! Go and build something awesome with Scribe! :)"); } }函数来执行此操作。

你可以看看我的小提琴。

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

编辑：未来使用的代码：

filter()

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是第二个或第一个孩子，第二个将有效。

<强>段：

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

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

请参阅此jsbin：http://jsbin.com/yubafe/edit?html,js,console,output

Answer 5

您可以在代码中使用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/

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

5 个答案: