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

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

如何获取父跨度的文本？

5 个答案: