如何获取父跨度的文本？答案

【问题标题】：How to get the text of parent span ?如何获取父跨度的文本？
【发布时间】：2013-10-11 07:46:58
【问题描述】：

我在获取父跨度的文本时遇到问题。这是我正在实现的代码

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

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

谢谢

【问题讨论】：

你能输入你的代码吗？

标签： javascript

【解决方案1】：

如果你对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());
    });
});

【讨论】：

【解决方案2】：

将您的 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/

【讨论】：

【解决方案3】：

首先要做的是：您应该始终在mozilla site 上查阅 Html 和 Javascript 文档。看看下面的代码。 html 的结构方式是在 Element 节点之后总是出现 TextNode。在文档中阅读有关此内容的更多信息。因此，您希望在单击子 span 元素后显示此文本节点，因此您可以使用 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>

【讨论】：

【解决方案4】：

如果您使用的是 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/

但是，如果您添加一些其他人已经指出的事件或类名，则更好，因为如果您有更多跨度的孩子或父母等，情况会变得更糟

【讨论】：

【解决方案5】：

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

对于纯 JavaScript，请查看：Get parent element of a selected text

【讨论】：

请明确这是针对 jQuery 的，因为 OP 没有标记 jQuery。
...它甚至不起作用（它也返回内部跨度的文本）。
jquery 没问题。但是当我提醒它时，我会弹出空白窗口