如何查找给定数组中包含值的 HTML 元素？答案

【问题标题】：How to find HTML elements with values contained in a given array?如何查找给定数组中包含值的 HTML 元素？
【发布时间】：2016-04-29 18:52:48
【问题描述】：

问题

鉴于这段代码：

<ul>
  <li><input type="hidden" value="1"/>Choice 1</li>
  <li><input type="hidden" value="2"/>Choice 2</li>
  <li><input type="hidden" value="3"/>Choice 3</li>
  <li><input type="hidden" value="4"/>Choice 4</li>
  <li><input type="hidden" value="5"/>Choice 5</li>
</ul>

如何正确选择输入值包含在数组[1, 3, 4] 中的列表元素？

研究轨迹

我在这段代码 sn-p 中尝试了一些解决方案，但似乎没有什么能很好地工作。

alert($("li").has("input[value='3']").text());  // Not a solution
alert($("li").has("input[value='[1,3,4]']").text());  // Not working
alert($("li").has("input[value=[1,3,4]]").text());  // Not working 
alert($("li").has("input[value=['1','3','4']]").text());  // Nope

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><input type="hidden" value="1"/>Choice 1</li>
  <li><input type="hidden" value="2"/>Choice 2</li>
  <li><input type="hidden" value="3"/>Choice 3</li>
  <li><input type="hidden" value="4"/>Choice 4</li>
  <li><input type="hidden" value="5"/>Choice 5</li>
</ul>

【问题讨论】：

标签： javascript jquery html jquery-selectors

【解决方案1】：

您可以使用filter() 从相关子input 元素中找到li。

var valueArr = [1, 3, 4];
var $li = $('li').filter(function() {
  return valueArr.indexOf(parseInt($(this).find('input').val(), 10)) != -1;
});
$li.css('color', '#C00'); // just to make the effect obvious
console.log($li.text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="hidden" value="1" />Choice 1</li>
  <li>
    <input type="hidden" value="2" />Choice 2</li>
  <li>
    <input type="hidden" value="3" />Choice 3</li>
  <li>
    <input type="hidden" value="4" />Choice 4</li>
  <li>
    <input type="hidden" value="5" />Choice 5</li>
</ul>

【讨论】：

是的，但我需要选择列表元素，而不是输入。所以我需要添加var $li = $inputs.parent("li"); 对吗？
没问题，很高兴为您提供帮助

【解决方案2】：

您可以在此处使用filter()

alert($("li").filter(function() {
  return [1, 3, 4].indexOf(parseInt($('input', this).val(), 10)) > -1;
}).text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="hidden" value="1" />Choice 1</li>
  <li>
    <input type="hidden" value="2" />Choice 2</li>
  <li>
    <input type="hidden" value="3" />Choice 3</li>
  <li>
    <input type="hidden" value="4" />Choice 4</li>
  <li>
    <input type="hidden" value="5" />Choice 5</li>
</ul>

或使用 multiple attribute selector

alert($("li").has('[value=1],[value=3],[value=4]').text()); // Not working

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="hidden" value="1" />Choice 1</li>
  <li>
    <input type="hidden" value="2" />Choice 2</li>
  <li>
    <input type="hidden" value="3" />Choice 3</li>
  <li>
    <input type="hidden" value="4" />Choice 4</li>
  <li>
    <input type="hidden" value="5" />Choice 5</li>
</ul>

【讨论】：

【解决方案3】：

var arr = ['1', '3', '4'];

$('ul li').filter(function() {

  return $.inArray($(this).find('input').val(), arr) != -1; //  if found return and add class red

}).addClass('red')

.red {
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="hidden" value="1" />Choice 1</li>
  <li>
    <input type="hidden" value="2" />Choice 2</li>
  <li>
    <input type="hidden" value="3" />Choice 3</li>
  <li>
    <input type="hidden" value="4" />Choice 4</li>
  <li>
    <input type="hidden" value="5" />Choice 5</li>
</ul>

这样做

【讨论】：

【解决方案4】：

我们要获取多属性选择器格式为

$("li").has("input[value='1'],input[value='3'],input[value='4']");

使用reduce从array获取它

var arr = [1,3,4];

document.write($("li").has(arr.reduce(function(prev,next){
  return prev + ",input[value='"+next+"']";
},"").slice(1)).text());

<script src="https://code.jquery.com/jquery-2.1.4.js"></script><ul>
  <li><input type="hidden" value="1"/>Choice 1</li>
  <li><input type="hidden" value="2"/>Choice 2</li>
  <li><input type="hidden" value="3"/>Choice 3</li>
  <li><input type="hidden" value="4"/>Choice 4</li>
  <li><input type="hidden" value="5"/>Choice 5</li>
</ul>

【讨论】：