Find, filter, and each method learning in jquery

Find () overview

Searches for all elements that match the specified expression. This function is a good way to find out the descendant elements of the element being processed.

All searches are done using jquery expressions. This expression can be written using Css1-3 's selector syntax.

Parameters ExprString V1.0

Expression for Lookup

JQuery Object Object V1.6

A jquery object for matching elements

elementDomElement V1.6

A DOM element

Example Description:

Starting with all the paragraphs, search further for the following span element. Same as $ ("P span").

HTML Code:

<p><span>Hello</span>, how are you?</p>

JQuery Code:

$("p").find("span")

Results:

[ <span>Hello</span> ]

Filter () overview

Filters out the collection of elements that match the specified expression.

This method is used to narrow the range of matches. Separate multiple expressions with commas

Parameters ExprString V1.0

A string value that contains the selector expression that matches the current collection of elements.

JQuery ObjectObject V1.0

The existing jquery object to match the current element.

elementExpression V1.4

A DOM element that is used to match elements.

function (Index)Function V1.4

A function is used as a collection of test elements. It accepts a parameter index, which is an element in the jquery collection. In the function, this refers to the current DOM element.

Example parameter Selector Description:

Preserve elements with the Select class

HTML Code:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

JQuery Code:

$("p").filter(".selected")

Results:

[ <p class="selected">And Again</p> ]

Parameter Selector Description:

Preserve the first and the elements with a select class

HTML Code:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

JQuery Code:

$("p").filter(".selected, :first")

Results:

[ <p>Hello</p>, <p class="selected">And Again</p> ]

callback function Description:

Preserves elements in child elements that do not contain ol.

HTML Code:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

JQuery Code:

$("p").filter(function(index) {  return $("ol", this).length == 0;});

Results:

[ <p>How are you?</p> ]

each () overview

Executes a function with each matching element as the context.

means that each time the function passed in is executed, the This keyword in the function points to a different DOM element (each time a different matching element). Also, each time a function is executed, a function is passed a numeric value that represents the position of the element in the matched element collection as an argument (the zero-based integer type) for the execution environment. Returning ' false ' will stop the loop (just like using ' break ' in a normal loop). Return ' true ' to jump to the next loop (just like using ' continue ' in a normal loop).

Parameters CallbackFunction V1.0

Functions to be executed for each matching element

Example Description:

Iterate over two images and set their SRC properties. Note: Here this refers to a DOM object rather than a JQuery object.

HTML Code:

JQuery Code:

$("img").each(function(i){   this.src = "test" + i + ".jpg"; });

Results:

[ ,  ]

Describe:

If you want a jquery object, you can use the $ (this) function.

HTML Code:

<button>Change colors</button><span></span> <div></div> <div></div><div></div> <div></div><div id="stop">Stop here</div> <div></div><div></div><div></div>

JQuery Code:

$("img").each(function(){  $(this).toggleClass("example");});

Describe:

You can use ' return ' to jump out of each () loop ahead of time.

HTML Code:

<button>Change colors</button><span></span> <div></div> <div></div><div></div> <div></div><div id="stop">Stop here</div> <div></div><div></div><div></div>

JQuery Code:

$("button").click(function () { $("div").each(function (index, domEle) {   // domEle == this   $(domEle).css("backgroundColor", "yellow");    if ($(this).is("#stop")) {   $("span").text("Stopped at div index #" + index);   return false;   } });});

Find, filter, and each method learning in jquery