JQuery Filter with $.find() Method

From CoderLearner
Jump to: navigation, search

Syntax

$.find( selector )

$.find( jQuery object )

$.find( element )

Page basic nested list

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Find and Set Color

$('li.item-ii').find('li').css('background-color', 'red');

Result

The result of this call is a red background on items A, B, 1, 2, 3, and C.

$.find(jQuery Object)

var $allListElements = $('li'); // create jquery object
$('li.item-ii').find( $allListElements ); // assign object to $.find()

// element index
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

$.find(element)

<!-- element-->
  <p><span>Hello</span>, how are you?</p>
  <p>Me? I'm <span>good</span>.</p>

<script>
  $("p").find("span").css('color','red');
</script>

Result

Hello and good words assign a red color.

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>