CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Ariyan
Ariyan

Reputation: 15168

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

I'm trying to find first level children of an element in any depth.

For example, I have a fieldset element that has some children including other fieldset elements; I want to find only those elements that are in the first fieldset and not in the second.

In other words, I want all children of the parent fieldset but not those children from any nested fieldsets.

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

And I do $("#root").find("span") and it finds all spans, but I want to find only Test1,Test2,Test3

How can I do this in jQuery?

Upvotes: 3

Views: 890

Answers (5)

Jean Troiani
Jean Troiani

Reputation: 45

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

See this jsbin: http://jsbin.com/yubafe/edit?html,js,console,output

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

Either of these selectors work with your existing 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');

The second one will work if the fieldset is the second or first child.

Snippet:

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

Upvotes: 1

ebilgin
ebilgin

Reputation: 1252

You can do it with filter() and parents() functions of jQuery.

You can check out my fiddle.

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

Edit: the code for future use: 

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

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

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

            return false;

        }

        return true;

    }

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

Upvotes: 1

eladolo
eladolo

Reputation: 91

You can use css pseudo-class :not and a css class on your code to filter that 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");


You can tested here:

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253496

I'd suggest:

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

References:

Upvotes: 2

Related Questions