Question

我有一个如下列表。

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

Answer 1

对于适用于旧浏览器的版本......

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

jsFiddle

如果使用jQuery ......

var matchedLi = $('li:has(:hidden[value="blah"])');

jsFiddle

Answer 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 ++ ){

 }

编辑：忘记了等级值

Answer 3

使用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/

Answer 4

以下是如何在简单的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);
    }  


}

Answer 5

由于问题上有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;
    }
  }
}

您可能希望将选择器中使用的值传递给函数，而不是将其硬编码。

Answer 6

如果你可以使用jQuery，你可以$("input[value='blah']")获得一组带有value“blah”的输入元素。

然后获取您可以使用li的输入字段的父closest("li")。

Answer 7

如果您使用JQuery，则可以使用以下代码：

$("#id_of_blah").closest("li")

如果不这样做，则必须编写自己的函数，选择与隐藏值最接近的<li>。

是否可以通过其下降隐藏值访问HTML元素？

7 个答案: