Question

I have a list like below.

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

How can i get the “li” element which has hidden text of value blah.There can be several “li” element which have a hidden text of value “blah”.

Answer 1

For a version that will work on older browsers too…

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.

If using jQuery…

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

jsFiddle.