Question

请看看这个DOM树......

  <div>

      <div>

            <span>  Home1  </span>

      </div>

      <span>  Home2  </span>

      <span>  Home3  </span>

  </div>

现在假设我有一个场景，不知怎的，我得到了第一个span Home1 的innerHTML。是否可以通过仅使用此（Home1）信息来获取元素跨度及其父div。

Answer 1

Here is what you want

这是html：

<label>opal fruits</label>

这是jQuery：

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

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

的范围{{1}}

Answer 3

有很多方法可以获取有关您元素的信息。

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

<强>样本

http://jsfiddle.net/a4J9U/

如果您希望脚本搜索“Menu1”，您应该考虑将“Menu1”添加为span或parentNode上的属性。

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

然后致电

document.getElementById('Menu1');

非常快。

如果您更具体地解释为什么需要从变量中获取该范围，我可以重新详细说明代码。

如果您有任何问题，请询问。

Answer 4

innerHTML方法返回String类型。它不与DOM树相关联。

您可以使用jQuery及其contains selector（fiddle）：

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

Answer 5

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!");
}

使用innerHTML查找元素

5 个答案: