Question

我想在数组中搜索特定值并返回其索引。

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);

});

不幸的是我得到-1。这意味着找不到指定的值。但为什么我得到-1？如果我在$childArr输出console.log，我会得到一个数值为(4) [div#task1, div#task2, div#task3, div#task4]的数组。

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

Answer 1

数组是HTML节点元素的列表，因此您必须传递要搜索的节点元素，而不是字符串：

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您想在index内获取.col-md-6:last元素，可以使用index()函数

＆＃13;

$(document).ready(function() {

  var index = $(".col-md-6:last #task3").index();
  

  console.log(index);

});

＆＃13;

<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>

＆＃13;

Answer 3

当Sylwek和Suren Srapyan回答你时，你不必使用toArray（）来完成你想要的任务。但是，如果您想保留此逻辑，则可以使用findIndex()函数

＆＃13;

$(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);
  
});

＆＃13;

<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>

＆＃13;

如何使用jquery在数组中搜索指定的值

3 个答案: