如何查找给定数组中包含值的HTML元素
How to find HTML elements with values contained in a given array?
问题
给定这段代码:
<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]
中的值的输入的列表元素?
研究轨迹
我在这个代码片段中尝试了一些解决方案,但似乎没有什么能很好地工作。
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>
您可以使用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>
您可以在此处使用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>
或者使用多属性选择器
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>
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>
喜欢这个
我们必须将多属性选择器格式作为
$("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>
相关文章:
- 循环遍历以数组为值的Javascript对象
- JavaScript数组包含一个值
- 向多维数组添加值和从多维数组请求值
- JavaScript/jQuery JSON数组问题-值为未定义
- 如何在javascript中访问数组的值
- 如何按数组/对象值的倍数过滤对象数组
- 如何在Javascript中从Json数组导入值
- Javascript-如何在窗体上方显示数组的值
- 根据优先级获取数组的值
- JavaScript 如果数组包含名称,则不要这样做
- 来自 JavaScript 中数组的值的总和
- 如果数组包含特定值,则返回该值的完整“内容”
- JavaScript数组-将值相加
- 读取通过push生成的数组的值
- 正在尝试获取事件之外的更新数组的值
- Javascript if数组包含正则表达式字符串
- 解析云查询数组包含值
- javascript数组对象值包含另一个数组值
- Javascript数组包含值
- 如何检查 JSON 数组包含不同/多个键值对