如何獲得父跨度的文本？

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>