How to search for a specified value within an array using jquery

Question

I would like to search for a specific value in an array and return its index.

html:

<div class="container">
  <div class="col-md-6">
    <div id="task0">Task0</div>
  </div>
  <div class="col-md-6">
    <div id="task1">Task1</div>
    <div id="task2">Task2</div>
    <div id="task3">Task3</div>
    <div id="task4">Task4</div>
  </div>
</div>

jquery:

$(document).ready(function() {

  $childArr = $(".col-md-6:last").children().toArray();

  $indexNumber = $.inArray("div#task3", $childArr);

  console.log($indexNumber);

});

Unfortunately I get -1. This means that the specified value was not found. But why do I get the -1 ? If i output the $childArr in console.log I get an array with this values (4) [div#task1, div#task2, div#task3, div#task4].

https://jsfiddle.net/DTcHh/39987/

Your logic is rather odd. Why bother making an array at all when you can just use $('#task3') to get the element you require...? If you want that element's index, use index(). As for your code, it doesn't work because you're looking for the index of a string in an array of jQuery objects - and those jQuery objects hold the .col-md-6 elements anyway, not the child #taskN elements. It may be better if you stated what you wanted to achieve, as this does not seem optimal. — Rory McCrossan
– Rory McCrossan, Commented Dec 7, 2017 at 10:06

Sylwek · Accepted Answer · 2017-12-07 10:09:54Z

2

If you want to get index of element inside .col-md-6:last you can use index() function

$(document).ready(function() {

  var index = $(".col-md-6:last #task3").index();
  

  console.log(index);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-md-6">
    <div id="task0">Task0</div>
  </div>
  <div class="col-md-6">
    <div id="task1">Task1</div>
    <div id="task2">Task2</div>
    <div id="task3">Task3</div>
    <div id="task4">Task4</div>
  </div>
</div>

answered Dec 7, 2017 at 10:09

Sylwek

8661 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Greg Ostry Over a year ago

okey this is very simple with the index function. This is working for me, thank you. Dziekuje

Jorge Fuentes González · Accepted Answer · 2017-12-07 10:09:21Z

2

The array is a list of HTML node elements, so you must pass the node element you want to search, not the string:

$(document).ready(function() {

	$childArr = $(".col-md-6:last").children().toArray();
  
  $indexNumber = $.inArray($("div#task3")[0], $childArr);
  
  console.log($indexNumber);
  console.log($childArr);
});

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-md-6">
    <div id="task0">Task0</div>
  </div>
  <div class="col-md-6">
    <div id="task1">Task1</div>
    <div id="task2">Task2</div>
    <div id="task3">Task3</div>
    <div id="task4">Task4</div>
  </div>
</div>

answered Dec 7, 2017 at 10:09

Jorge Fuentes González

11.9k4 gold badges48 silver badges70 bronze badges

2 Comments

Jorge Fuentes González Over a year ago

By the way, what you want to achieve is pretty weird. If you tell us why you want to do this we can try to help you further.

Greg Ostry Over a year ago

This was just a sample code to understand how can i get a position in a div. My task are dynamic. They change in time. I have 2 columns (.col-md-6). In these two columns i have 8 columns (.col-md-3). And in this 8 columns i have some bootstrap panels. If there are more than 10 panels so switch the rest of this panel to the other column. For this purpose i need sometime the position of the elements. is hard to describe it

Mael · Accepted Answer · 2017-12-07 10:31:27Z

As Sylwek and Suren Srapyan answers you don't have to use toArray() to accomplish what you want. However if you want to keep this logic you can use the findIndex() function

$(document).ready(function() {

  $childArr = $(".col-md-6:last").children().toArray();
  
  $indexNumber = $childArr.findIndex(function(child){return child.id == "task3"})
  
  console.log($indexNumber);
  console.log($childArr);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-md-6">
    <div id="task0">Task0</div>
  </div>
  <div class="col-md-6">
    <div id="task1">Task1</div>
    <div id="task2">Task2</div>
    <div id="task3">Task3</div>
    <div id="task4">Task4</div>
  </div>
</div>

Collectives™ on Stack Overflow

How to search for a specified value within an array using jquery

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related