在javascript中獲取附近的兄弟姐妹
[英]get nearby sibling in javascript
問題描述
我有一個特定的 DIV 結構，中間有一個錨標記。 單擊鏈接時，我需要獲取父div中另一個span元素的值並執行某些操作（例如，提醒它）。
html是這樣的：
...
<div id="div1">
...
<span>This is reqd</span>
...
<a href="#">Click Me </a>
...
</div>
...
整個div在頁面中重復多次。 當我點擊a我想提醒“這是需要的”。
可以這樣搜索 HTML 嗎？
5 個解決方案
解決方案1
5 已采納 2013-01-23 10:58:52
對於單個跨度元素，應該很容易。 只需在單擊鏈接時調用 myFunction(this) 並像這樣操作 DOM：
function myFunction(currObj){
var parentofSelected = currObj.parentNode; // gives the parent DIV
var children = parentofSelected.childNodes;
for (var i=0; i < children.length; i++) {
if (children[i].tagName = "span") {
myValue= children[i].value;
break;
}
}
alert(myValue); // just to test
} // end function
希望這有效。 它對我有用！！
解決方案2
4 2013-01-23 10:49:48
由於<span>不是<a>的直接兄弟，我們不能調用.previousSibling或.previousElementSibling 。 最佳解決方案可能是獲取父項並查詢<span>
document.getElementById( 'div1' ).getElementsByTagName( 'a' )[ 0 ].addEventListener('click', function() {
alert( this.parentNode.getElementsByTagName( 'span' )[ 0 ].textContent );
}, false);
演示： http : //jsfiddle.net/cEBnD/
解決方案3
2 2013-01-23 10:55:21
更新：使用和不使用 jQuery 的解決方案
這個答案因為用 jQuery 展示了一個例子而得到了很多反對，我決定添加更多帶有 vanilla JavaScript 的例子，這樣任何人都可以選擇是否使用 jQuery。
通常，您可以在 vanilla JavaScript 中使用.previousSibling ，請參閱：
您可以在 jQuery 中使用.prev() ，請參閱：
但是請記住，當您不知道整個 DOM 的確切結構時，這些在更復雜的情況下可能不起作用。
以下是使用 jQuery 和 vanilla JavaScript 實現該目標的幾個示例，適用於具有固定 DOM 結構的簡單情況以及使用類的更復雜情況。
不上課
對於最簡單的 DOM 結構，您可能會在所有鏈接上放置事件偵聽器並依賴於 DOM 的隱式知識，但這可能不適用於更復雜的情況 - 對於那些請參見下面的類示例。
使用 jQuery：
$('a').click(function () {
alert( $(this).prev().text() );
return false;
});
見演示。
沒有 jQuery：
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
alert(link.previousSibling.previousSibling.innerText);
});
});
請注意，必須使用previousSibling兩次，否則將使用位於跨度和鏈接之間的空文本節點。
見演示。
使用類
如果span不是緊接在a元素之前，那么您可能還想以不同的方式進行操作，同時添加一些類以確保您的代碼不會破壞頁面上的任何其他鏈接：
使用 jQuery：
$('a.link').click(function () {
alert( $(this).parent().find('span.text').text() );
return false;
});
見演示。
沒有 jQuery：
document.querySelectorAll('a.link').forEach(link => {
link.addEventListener('click', () => {
alert(link.parentNode.querySelector('span.text').innerText);
});
});
見演示。
上面的代碼將單擊處理程序綁定到每個具有“link”類a元素，這將警告其同級span元素包含的具有“text”類的文本。 （當然，類名應該比這更具描述性。）
解決方案4
1 2019-11-16 04:06:14
<html>
<body>
<div id="div1">
<span>This is required</span>
<a href="#" onclick="myclick(this.parentNode)">Click Me</a>
</div>
</body>
<script>
function myclick(x){
var y = x.querySelector("span").innerHTML;
alert(y)
}
</script>
</html>
除了跨度，您還可以給出類名，例如，
<span class="classname">This is required</span>
x.querySelector(".classname").innerHTML
解決方案5
0 2017-04-26 10:25:17
使用jQuery：
$('#innerId').siblings()
Javascript：獲取當前元素的同級[CKEditor所需]
[英]Javascript: Get sibling of current element [needed for CKEditor]
結合兩個不同的 JavaScript 函數來獲取 JSON 兄弟數據
[英]Combining two different JavaScript functions to get JSON sibling data
獲取下一個同級父節點的子節點不起作用的Javascript DOM
[英]Get Child Node of next Sibling Parent Node NOT Working Javascript DOM
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.