LearnKode

2 Example(s) of JQuery Array


Description :

In this example The ToArray() method returns the elements matched by the jQuery selector as an array and it will be show on alert box


JQuery Array Example - 1 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var i;
    var x = $("li").toArray()
    for (i = 0; i< x.length; i++) {
      alert(x[i].innerHTML);
    }
  });
});
</script>
</head>
<body>

<button style="border: 1px solid red; height: 40px; width:150px; font-size:17px; border-radius: 10px ">show value on alertbox</button>

<ul style="color: palevioletred; font-size: 20px">
  <li>Appwrk Design Team</li>
  <li>Appwrk Dev Team</li>
  <li>Appwrk Management Team</li>
</ul>

</body>
</html>
Try it » Download Example »

Output

Description :

In this Example The index() method returns the index position of specified elements relative to other specified elements  and click the list items to get the index position, relative to its sibling elements


JQuery Array Example - 2 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("li").click(function(){
    alert($(this).index());
  });
});
</script>
</head>
<body>

<h1 style="color: purple">Select any one in list </h1>

<ul>
  <li>Appwrk Dot Net Team</li>
  <li>Appwrk Design Team</li>
  <li>Appwrk Management Team</li>
  <li>Appwrk PHP Team</li>
  <li>Appwrk Angular Team</li>
</ul>

</body>
</html>
Try it » Download Example »

Output