How to Test if an Element Exists on jQuery
JQuery CSS selectors provide a new approach to meet the complexity of dynamic Web development. In conventional languages, objects are specifically instantiated. On a Web page, however, browser objects could have been created across different URL's using dynamically loaded markup and scripting languages. To manipulate objects at this level of complexity, you need a new way of specifying and handling browser objects. The JQuery CSS selector object array is an important tool to test for and manipulate browser elements. It uses the syntax "$(css-selector-pattern)." This article will guide you through the common patterns for finding elements.
Other People Are Reading
Instructions
-
-
1
Download JQuery library jquery-1.6.1.min.js at the JQuery website (see Resources). Save it to your desktop.
-
2
Copy and paste the following code into Notepad. Save the file as "jqtest.html" on your desktop. Notice that this consists of an input textbox and a button. When the user clicks on the button, the value in the textbox is assigned to the JavaScript "selector" variable. "$(selector)" is a JQuery object array containing all the elements that match the "css" string pattern in the "selector" variable. "$(selector).length" gives the total number of matching elements. The "for" loop builds a string containing the tag and id of each matching element, and outputs it to the span object for display.
<html><body>
selector: $('
<input type='text' id='tx1' class='myClass' myattr='hello' />')
<input type='button' id='bt1' value='Test' />
<span id='spOutput' class='myClass'></span>
<script type='text/javascript' src='jquery-1.6.1.min.js'></script>
<script>
$('#bt1').click(function(){
var selector=$('#tx1')[0].value;
var str="<br/>$('"+selector+"').length equals " +
$(selector).length + '<ol>';
for(var i=0; i<$(selector).length; i++){
str+='<li> element tag="'
+$(selector)[i].tagName.toLowerCase()
+'", id="'+$(selector)[i].id;
}
str+='</ol>';
jQuery($('#spOutput'))[0].innerHTML=str;
});
</script>
</body></html>
-
-
3
Double-click on "jqtest.html" on your desktop so that it opens in your browser. Enter an asterisk "*" in the input textbox, and then click on the "Test" button. This returns all the elements in the document.
-
4
Enter "html" in the textbox, and then click on the button. Notice that it returns only one html element with the "<html>" tag. Similarly, enter "input" and "span" to find the elements with the "<input>" and "<span>" tags. Entering "input, span, script" retrieves all the input, span and script elements in the document.
-
5
Enter "#bt1" in the textbox and click on the button. Notice that the hash "#" retrieves matches on values in the "id" attribute. Enter ".myClass" into the textbox. The dot "." retrieves matches on values in the "class" attribute.
-
6
Enter "input:text" followed by "input:button." These retrieve elements with "text" and "button" input types. Enter ".myClass:first" and then ".myClass:last." These retrieve the first and last elements with the class attribute value "myClass."
-
7
Enter "[myattr]" to retrieve the element with the attribute "myattr." Enter "[type='text']." This retrieves all elements with the value "text" in the "type" attribute. "[type!='text']" retrieves all elements with attribute types that do not equal '"text."
-
8
Enter "*:even", followed by "*:odd," "*:eq(5)," "*:gt(5)" and "*:lt(5)." Notice that these respectively retrieve all the elements in the document that have an even number index position, odd number index position, index position equal to five, index position greater than five and index position less than five.
-
1
Tips & Warnings
As well as using "if($(css-pattern-string).length)," one can also use the following tests for whether an element exists: "if($(css-pattern-string).is('*'))," "if($(css-pattern-string).size()>0)" and "if($(css-pattern-string)[0])."
References
Resources
- Photo Credit John Foxx/Stockbyte/Getty Images
More Like This
Comments
-
fine
