найти элемент, используя его innerHTML

Question

Пожалуйста, посмотрите на это DOM Tree ...

<div> 

     <div> 

      <span> Home1 </span> 

     </div> 

     <span> Home2 </span> 

     <span> Home3 </span> 

    </div> 

Теперь предположим, что у меня есть сценарий, где-то я получил innerHTML первого пролета home1. Возможно ли получить элемент span и его родительский div, используя только эту информацию (Home1).

Answer 1

Есть так много способов, чтобы получить информацию о ваших элементов.

Использование идентификатора innerHTML в качестве идентификатора не является хорошим решением.

Вы, вероятно, потребуется какое-то событие к тому, что заставляет вас искать, что «menu1»

Так вот обработчик щелчка, который работает и на других мероприятиях, которые дают вам информацию о том, что вы нажали.

function handler(e){ 
var txt='You clicked on a '+e.target.nodeName+'\n'; 
    txt+='The innerHTML is '+e.target.innerHTML+'\n'; 
    txt+='The text is '+e.target.textContent+'\n'; 
    txt+='The parentNode is '+e.target.parentNode.nodeName+'\n'; 
alert(txt) 
} 
document.addEventListener('click',handler,false) 

DEMO

http://jsfiddle.net/a4J9U/

Если вы хотите, чтобы ваш скрипт ищет, что "Menu1" вы должны рассмотреть, добавив, что "menu1" в качестве атрибута на пролете или ParentNode.

<div id="Menu1"> 
<span>Home1</span> 
</div> 

, а затем вызвать

document.getElementById('Menu1'); 

, который очень быстро.

Если вы объясните, почему вам нужно получить этот диапазон от переменной, я могу переработать код.

если у вас есть вопросы, просто спросите.

Answer 2

var mySpans = document.getElementsByTagName(span); 

for(var i=0;i<mySpans.length;i++){ 

if(mySpans[i].innerHTML == 'Home1'){ 

var parent = mySpans[i].parentNode; 
break; 

} 

} 

этого выбирает parent пролета, имеющего innerHTML home1

Answer 3

innerHTML тип Метод возврата строки. Он не связан с деревом DOM.

Вы можете использовать JQuery и containsselector (fiddle):

$(":contains('Home1')").last() 

Answer 4

var divRef; //Reference to the container of your div/span elements 
var spans = divRef.getElementsByTagName("span"); 
var spanContainer; 

for(var i = 0; i < spans.length; i++){ 
    if(spans[i].innerHtml == "Home 1"){ 
     spanContainer = spans[i].parentNode; 
     break; 
    } 
} 

if(spanContainer){ 
    alert("Element has been found!"); 
} 

Answer 5

Here is what you want.

Вот HTML:

<label>opal fruits</label> 

Вот JQuery:

$("label:contains(opal fruits)")