-->

21 April 2021

jQuery Select one of a set of elements

  Asp.Net CS By Example       21 April 2021
jQuery Select one of a set of elements

 In this post we are exploring more about jQuery Select one of a set of elements. A jQuery expression like $('p') returns a set of all <p> elements in a page. How does that set work? We can actually treat it like an array with an index value.


 For example, to select the first of a set of elements, we use an expression like this.

 $('p')[0] 

 In this example, we will rewrite the text in the <p> element, using the selected element's innerHTML property like this when the user clicks a button.


 $('p')[0].innerHTML=  "Hello World!"; 

 Below code example puts for see above jQuery select one of a set of elements working.

jqscript.html
<html>
<head>
    <title>
        Select one of a set of
        elements
    </title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        function selectElement( )
        {
        $('p')[0].innerHTML="<i>Hello World</i>";
        }
    </script>
</head>
<body>
    <h1>
        Select one of a set of
        elements
    </h1>
    <div>
        <p>This is paragraph 1.</p>
        <p>This is paragraph 2.</p>
        <p>This is paragraph 3.</p>
        <p>This is paragraph 4.</p>
    </div>
    <form>
        <input type="button"
               value="Select Element"
               onclick="selectElement( )"
        </input>
    </form>
</body>
</html>


Output:

logoblog

Thanks for reading jQuery Select one of a set of elements

Previous
« Prev Post

No comments:

Post a Comment

Please do not enter any spam link in the comment box.