javascript - 如何获取父跨度的文本？

Question

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

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

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

谢谢

Answer 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());
    });
});

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

Answer 3

首先要做的事情是：您应该始终查阅mozilla 站点上的 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> 

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

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

Answer 5

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

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