-
each( Function callback ) returns jQuery
Execute a function within the context of every matched element.
This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element.
Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index).
Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop).Example:
Iterates over three divs and sets their color property.
$(document.body).click(function () { $("div").each(function (i) { if (this.style.color != "blue") { this.style.color = "blue"; } else { this.style.color = ""; } }); });HTML:
<div>Click here</div> <div>to iterate through</div> <div>these divs.</div>Example:
If you want to have the jQuery object instead of the regular DOM element, use the $(this) function, for example:
$("span").click(function () { $("li").each(function(){ $(this).toggleClass("example"); }); });HTML:
To do list: <span>(click here to change)</span> <ul> <li>Eat</li> <li>Sleep</li> <li>Be merry</li> </ul>Example:
You can use 'return' to break out of each() loops early.
$("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; } }); });HTML:
<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> -
element( String element ) returns Array<Element>
Matches all elements with the given name.
Example:
Finds every DIV element.
$("div").css("border","3px solid red");HTML:
<div>DIV1</div> <div>DIV2</div> <span>SPAN</span> -
empty( ) returns Array<Element>
Matches all elements that have no children (including text nodes).
Example:
Finds all elements that are empty - they don't have child elements or text.
$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');HTML:
<table border="1"> <tr><td>TD #0</td><td></td></tr> <tr><td>TD #2</td><td></td></tr> <tr><td></td><td>TD#5</td></tr> </table> -
empty( ) returns jQuery
Remove all child nodes from the set of matched elements.
Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data.Example:
Removes all child nodes (including text nodes) from all paragraphs
$("button").click(function () { $("p").empty(); });HTML:
<p> Hello, <span>Person</span> <a href="javascript:;">and person</a> </p> <button>Call empty() on above paragraph</button> -
enabled( ) returns Array<Element>
Matches all elements that are enabled.
Example:
Finds all input elements that are enabled.
$("input:enabled").val("this is it");HTML:
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> -
end( ) returns jQuery
Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation).
If there was no destructive operation before, an empty set is returned.
A 'destructive' operation is any operation that changes the set of matched jQuery elements, which means any Traversing function that returns a jQuery object - including <a href='Traversing/add'>add</a>, <a href='Traversing/andSelf'>andSelf</a>, <a href='Traversing/children'>children</a>, <a href='Traversing/filter'>filter</a>, <a href='Traversing/find'>find</a>, <a href='Traversing/map'>map</a>, <a href='Traversing/next'>next</a>, <a href='Traversing/nextAll'>nextAll</a>, <a href='Traversing/not'>not</a>, <a href='Traversing/parent'>parent</a>, <a href='Traversing/parents'>parents</a>, <a href='Traversing/prev'>prev</a>, <a href='Traversing/prevAll'>prevAll</a>, <a href='Traversing/siblings'>siblings</a> and <a href='Traversing/slice'>slice</a> - plus the <a href='Manipulation/clone'>clone</a> function (from Manipulation).Example:
Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
jQuery.fn.showTags = function (n) { var tags = this.map(function () { return this.tagName; }) .get().join(", "); $("b:eq(" + n + ")").text(tags); return this; }; $("p").showTags(0) .find("span") .showTags(1) .css("background", "yellow") .end() .showTags(2) .css("font-style", "italic");HTML:
<p> Hi there <span>how</span> are you <span>doing</span>? </p> <p> This <span>span</span> is one of several <span>spans</span> in this <span>sentence</span>. </p> <div> Tags in jQuery object initially: <b></b> </div> <div> Tags in jQuery object after find: <b></b> </div> <div> Tags in jQuery object after end: <b></b> </div>Example:
Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
$("p").find("span").end().css("border", "2px red solid");HTML:
<p><span>Hello</span>, how are you?</p> -
eq( Number position ) returns jQuery
Reduce the set of matched elements to a single element.
The position of the element in the set of matched elements starts at 0 and goes to length - 1.Example:
Reduces the selection to the second selected element.
$("p").eq(1)HTML:
<p>This is just a test.</p><p>So is this</p>Result:
[ <p>So is this</p> ] -
eq( Number index ) returns Element
Matches a single element by its index.
Example:
Finds the third td. (annoying blink isn't it)
$("td:eq(2)").css("text-decoration", "blink");HTML:
<table border="1"> <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr> <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr> <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr> </table> -
eq( Integer index ) returns jQuery
Reduce the set of matched elements to a single element.
The position of the element in the set of matched elements starts at 0 and goes to length - 1.Example:
Turn the div with index 2 red by adding an appropriate class.
$("div").eq(2).addClass("red");HTML:
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> -
error( ) returns jQuery
Triggers the error event of each matched element.
This causes all of the functions that have been bound to that error event to be executed, and calls the browser's default error action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the error event. The error event usually fires when an element loses focus either via the pointing device or by tabbing navigation. -
error( Function fn ) returns jQuery
Binds a function to the error event of each matched element.
<p>There is no public standard for the error event. In most browsers, the window object's error event is triggered when a JavaScript error occurs on the page. An image object's error event is triggered when it is set an invalid src attribute - either a non-existent file, or one with corrupt image data.</p><p>If the event is thrown by the window object, the event handler will be passed three parameters: <ol><li>A message describing the event ("varName is not defined", "missing operator in expression", etc.),</li><li>the full URL of the document containing the error, and</li><li>the line number on which the error occured.</li></ol></p>
<p>If the event handler returns true, it signifies that the event was handled, and the browser raises no errors.</p><p>For more information, see: <ul><li>[http://msdn2.microsoft.com/en-us/library/ms536930.aspx msdn - onerror Event]</li><li>[http://developer.mozilla.org/en/docs/DOM:window.onerror Gecko DOM Reference - onerror Event]</li><li>[http://developer.mozilla.org/en/docs/DOM:event Gecko DOM Reference - Event object]</li><li>[http://en.wikipedia.org/wiki/DOM_Events Wikipedia: DOM Events]</ul></p>Example:
To keep a server-side log of JavaScript errors, you might want to:
$(window).error(function(msg, url, line){ jQuery.post("js_error_log.php", { msg: msg, url: url, line: line }); });Example:
To hide JavaScript errors from the user, you can try:
$(window).error(function(){ return true; });Example:
To hide the "broken image" icons for your IE users, you can try:
$("img").error(function(){ $(this).hide(); }); -
even( ) returns Array<Element>
Matches even elements, zero-indexed.
Example:
Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).
$("tr:even").css("background-color", "#bbbbff");HTML:
<table border="1"> <tr><td>Row with Index #0</td></tr> <tr><td>Row with Index #1</td></tr> <tr><td>Row with Index #2</td></tr> <tr><td>Row with Index #3</td></tr> </table>