如何获得父跨度的文本？

Question

我遇到问题以获取父跨度的文本。这是代码中，我实现

<span> hello this is test <span>click here</span></span> 

我想获得的click here点击hello this test内容。

感谢

Answer 1

使用jQuery，您可以使用此：$(this).parent().text();。

对于纯JavaScript，检查了这一点：Get parent element of a selected text

Answer 2

也许这样的事情，如果你使用jQuery，

$('span>span').parent('span').clone().find("span").empty().parent().text(); 

http://jsfiddle.net/fgUGa/1/

也是一个粗略的纯JS的解决方案

var childContent = document.querySelectorAll("span>span")[0].textContent; 
var parentContent = ""; 

var allSpans = document.querySelectorAll("span"); 

allSpans = Array.prototype.slice.call(allSpans); 

allSpans.forEach(function (spanEl) { 
    if (spanEl.textContent.replace(childContent,"").length>0) { 
     parentContent = spanEl.textContent.replace(childContent,""); 
    } 
    alert(parentContent); 
}); 

http://jsfiddle.net/fgUGa/2/

但是如果添加了某种事件，正如其他人注意或类名，因为这会变得更糟，如果你有多个展子女或父母等

Answer 3

如果你用jQuery没有问题最好，有这样的

http://jsfiddle.net/7gbNK/55/

HTML碱性溶液

<span> hello this is test <span class="button">click here</span></span> 

jQuery的

$(document).ready(function(){ 
    $('.button').on('click', function(){ 
     var parentElement = $(this).parent().clone(); 
     parentElement.children('span').remove() 
     alert(parentElement.text()); 
    }); 
}); 

Answer 4

更改您的HTML：

<span> hello this is test <span onclick="showParentText(this)">click here</span></span> 

，并添加脚本标记以下功能：

window.showParentText = function(obj) { 
    var thisText = obj.outerHTML, 
     parentText = obj.parentNode.innerHTML; 

    alert(parentText.replace(thisText, "")); 
} 

检查小提琴这里：http://jsfiddle.net/F7YFB/

Answer 5

第一事情第一：你应该总是咨询mozilla site上的Html和Javascript文档。看看下面的代码。 html元素节点总是出现在TextNode之后。在文档中阅读更多关于此的信息。因此，您要在点击子元素后显示此文本节点，因此您使用DOM API来获取所需内容：

<script> 
    function respond_to_click_event(event) { 
     alert(event.target.previousSibling.wholeText); 
    } 

</script> 

<span> hello this is test 
    <span onclick="respond_to_click_event(event)">click here</span> 
</span>