each,eq and not method of Jquery Traversing (Part 12)

In this post i will include some of the important methods of Traversing Which are very useful in daily life of web developer.

each: It is used to do looping in the dom element.

Sample code for .each method in Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        p {
            color: red;
            text-align: center;
            cursor: pointer;
            font-weight: bolder;
            width: 300px;
        }
    </style>
    
</head>
<body>
    <fieldset>
       <legend>This is the sample code for each method in Jquery.</legend>
    
<p>This is the paragraph1</p>
<p>This is the paragraph2</p>
<p>This is the paragraph3</p>
    
    </fieldset>
    <script>
        $(document.body).click(function () {
            $("p").each(function () {
                if (this.style.color !== "blue") {
                    this.style.color = "blue";
                } else {
                    this.style.color = "";
                }
            });
        });
    </script>
</body>
</html>

Before Click Event

After Click Event

In the above example we saw that each method is doing looing in each paragraph and changing the color from red to blue.

.eq:
>> It is used to filter the DOM elemnts on basis of index id of dom element.

Sample code for .eq in Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").eq(2).css("background-color", "silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for filter in Jquery
        </legend>
    

 <ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>
        </fieldset>
</body>
</html>

In the above example we saw that eq method is used for finding the index of list Item(li) then changing the background color to expected color.

Not(selector)

>> It is used to remove the elements from the set of matched elements.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").not(":even").css("background-color", "Silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for not in Jquery
        </legend>
 <ul>
  <li>list item 0</li>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
        </fieldset>
</body>
</html>