我有一个如下列表。
<ul class="groupList" id="groupList">
<li id="group1">
<div class="1">
......
</div>
<div class="2">
<select class.....>
<input type="hidden" value="blah" id="groupField1" name="groupField1"/>
</div>
</li>
<li>....</li>
<li>....</li>
</ul>
如何获得隐藏了值为blah的文本的“li”元素。可以有几个“li”元素,其隐藏文本值为“blah”。
答案 0 :(得分:3)
对于适用于旧浏览器的版本......
var matchedLi = [],
li = document.getElementsByTagName('li');
for (var i = 0, liLength = li.length; i < liLength; i++) {
var input = li[i].getElementsByTagName('input');
for (var j = 0, inputLength = input.length; j < inputLength; j++) {
if (input[j].type == 'hidden' && input[j].value == 'blah') {
matchedLi.push(li[i]);
}
}
}
如果使用jQuery ......
var matchedLi = $('li:has(:hidden[value="blah"])');
答案 1 :(得分:2)
使用xpath
var findPattern = "//li[input[@type='hidden' and @value='blah']]";
var resultLinks = document.evaluate( findPattern, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
for ( var i=0; (res = resultLinks.snapshotItem(i) ) !=null; i ++ ){
}
编辑:忘记了等级值
答案 2 :(得分:1)
使用jquery
$(function(){
alert($('input[value="blah"]').length);
});
使用经典的javascript:
var elems = document.getElementsByTagName('input');
var i = elems.length;
var arr = [];
while(i--){
if (elems[i].value == 'blah'){
arr.push(elems[i]);
}
}
alert(arr.length);
的jsfiddle: http://jsfiddle.net/ShlomiKomemi/dvdPd/13/
答案 3 :(得分:1)
以下是如何在简单的javascript中完成的: http://jsfiddle.net/ZCTvp/
var parentCont = document.getElementById('groupList');
var children = parentCont.getElementsByTagName('li');
var check = 'blah';
/* now loop the LIs and find relevant INPUT */
for(var i = 0 ; i < children.length ; i++)
{
var currChild = children[i];
var inputs = currChild.getElementsByTagName('INPUT');
for(var j = 0 ; j < inputs.length ; i++)
{
if(inputs[i].value == check)
alert(inputs[i].id);
}
}
答案 4 :(得分:1)
由于问题上有HTML5标记,因此可能只需要在支持合适HTML5功能的浏览器中使用该解决方案。如果是这样,您可以使用 querySelectorAll 并使用简单的 upTo 函数:
// Use qSA to get the input
function getLis() {
if (!document || !document.querySelectorAll) return;
var lis = []
var inputs = document.querySelectorAll("input[value='blah']");
for (var i=0, iLen=inputs.length; i<iLen; i++) {
lis.push(upTo(inputs[i], 'li'));
}
return lis;
}
// Supporting 'upTo' function to go up the DOM from an element
// to the first with tagName
function upTo(el, tagName) {
tagName = tagName.toLowerCase();
while (el) {
el = el.parentNode;
if (el.tagName && el.tagName.toLowerCase() == tagName) {
return el;
}
}
}
您可能希望将选择器中使用的值传递给函数,而不是将其硬编码。
答案 5 :(得分:0)
如果你可以使用jQuery,你可以$("input[value='blah']")
获得一组带有value
“blah”的输入元素。
然后获取您可以使用li
的输入字段的父closest("li")
。
答案 6 :(得分:0)
如果您使用JQuery,则可以使用以下代码:
$("#id_of_blah").closest("li")
如果不这样做,则必须编写自己的函数,选择与隐藏值最接近的<li>
。