Select the first span element $("span:first") in jQuery

Description

The following code shows how to select the first span element $("span:first").

Example


<html>
<head>
<style>
.test{ border: 1px solid red; }
</style><!--  w  w w  . j a  v  a 2 s .  co  m-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("span:first").text($(":hidden", document.body).length + " hidden elements.");
});
</script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">java 2s.c om!</div>
<div></div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span></span>
</body>
</html>

Click to view the demo

The code above generates the following result.

Select the first span element $("span:first") in jQuery

Home »
  Javascript Tutorial »
    jQuery »
      jQuery Select

...
Select input element that don't have the na...
Select last paragraph in jQuery
Select not checked form input elements in j...
Select numbered child in jQuery
Select odd numbered child in jQuery
Select paragraph at even position and remov...
Select parent with parent selector $("td:pa...
Select sibling for checked form elements $(...
Select sibling with General sibling $('E ~ ...
Select tag first parent in jQuery
Select tag inside another tag in jQuery
Select tags from nextAll() by tag name in j...
Select text input element in jQuery
Select the child of a div element in jQuery
Select the first LI element from selected e...
Select the first parent in jQuery
Select the first row in a table $("tr:first...
Select the first span element after clickin...

Select the first span element $("span:first...

Select the first table row in jQuery
Select the first two table cells by Less th...
Select the hidden div tags with hidden sele...
Select the input element by name and then s...
Select the last row in table with last sele...
Select the last table row in jQuery
Select the next and change its text in jQue...
Select the next elements who has certain cl...
Select the next sibling and apply style in ...
Select the previous element for div and set...
Select the second table row with Greater th...
Select third table cells with Element at in...
Select visible element with visible selecto...
Select with Attribute equals ([foo=bar]) se...
Select with Attribute not equal ([foo!=bar]...
F') selector in jQuery' href='Select_with_Child_E_F_selector_in_jQuery.htm'>Select with Child $('E > F') selector in jQ...
Select with Descendant $('E F') selector in...
Select with ID selector $("ul#myList") in j...
Select with Last child selector in jQuery
...