【问题标题】：get nearby sibling in javascript在javascript中获取附近的兄弟姐妹
【发布时间】：2013-01-06 19:39:02
【问题描述】：

我有一个特定的 DIV 结构，在某处之间有一个锚标记。单击链接时，我需要获取父 div 中另一个 span 元素的值并执行某些操作（例如，提醒它）。

html是这样的：

...
<div id="div1">
  ...
  <span>This is reqd</span>
  ...
  <a href="#">Click Me </a>
  ...
</div>
...

整个div在页面中重复了很多次。当我点击a 时，我想提醒“这是reqd”。

可以这样搜索HTML吗？

【问题讨论】：

有没有可用的小提琴？
@Riju 我没有小提琴.. 父 DIV 中只有一个 HIDDEN span 元素。忘了说

标签： javascript dom siblings

【解决方案1】：

对于单个跨度元素，它应该很容易。只需在单击链接时调用 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

希望这可行。对我有用！！

【讨论】：

谢谢...正是我想要的。瞬间生效！！
document.getElementsByTagName('span')[0] 而不是 for 循环。此外，.value 不是访问跨度的有效方式。
应该有，应该有，应该有！

【解决方案2】：

由于<span> 不是<a> 的直接兄弟，我们不能调用.previousSibling 或.previousElementSibling。最好的解决方案可能是获取 parent 并查询 <span>

document.getElementById( 'div1' ).getElementsByTagName( 'a' )[ 0 ].addEventListener('click', function() {
    alert( this.parentNode.getElementsByTagName( 'span' )[ 0 ].textContent );
}, false);

演示：http://jsfiddle.net/cEBnD/

【讨论】：

和我回答的差不多，但没有明显的原因被否决。更不用说以有效的方式访问跨度，也无需加载库。 +1。 hrmpf、StackOverflow...
如果你使用addEventListener和textContent，你也可以使用querySelector :P jsfiddle.net/Ralt/cEBnD/1

【解决方案3】：

更新：使用和不使用 jQuery 的解决方案

这个答案因展示 jQuery 示例而遭到如此多的反对，因此我决定添加更多带有 vanilla JavaScript 的示例，以便任何人都可以选择是否使用 jQuery。

一般情况下，您可以在原生 JavaScript 中使用 .previousSibling，请参阅：

https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

您可以在 jQuery 中使用.prev()，请参阅：

https://api.jquery.com/prev/

但请记住，当您不知道整个 DOM 的确切结构时，这些可能不适用于更复杂的情况。

下面是几个使用 jQuery 和 vanilla JavaScript 实现该目标的示例，适用于具有固定 DOM 结构的简单案例和使用类的更复杂案例。

没有类

对于最简单的 DOM 结构，您可能会通过在所有链接上放置事件侦听器并依赖 DOM 的隐式知识来摆脱困境，但这可能不适用于更复杂的情况 - 对于那些请参阅下面的类示例。

使用 jQuery：

$('a').click(function () {
  alert( $(this).prev().text() );
  return false;
});

见DEMO。

没有 jQuery：

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    alert(link.previousSibling.previousSibling.innerText);
  });
});

请注意，previousSibling 必须使用两次，否则将使用位于跨度和链接之间的空文本节点。

见DEMO。

使用类

如果span 不是紧接在您的a 元素之前，那么您可能还希望做一些不同的事情，同时添加一些类以确保您的代码不会破坏页面上的任何其他链接：

使用 jQuery：

$('a.link').click(function () {
  alert( $(this).parent().find('span.text').text() );
  return false;
});

见DEMO。

没有 jQuery：

document.querySelectorAll('a.link').forEach(link => {
  link.addEventListener('click', () => {
    alert(link.parentNode.querySelector('span.text').innerText);
  });
});

见DEMO。

上面的代码会将点击处理程序绑定到每个具有类“link”的a 元素，这将警告其兄弟span 元素包含的具有类“text”的文本。（当然，类名应该比这更具描述性。）

【讨论】：

不要将霰弹枪带到击剑比赛中。 OP 没有要求 jQuery，没有用 jQuery 标记问题，与普通 JS 相比，jQuery 效率低下。是的，它的代码更短，但这是唯一的优势。
@Cerbrus jQuery is JavaScript 并且问题没有提到针对任何特定技术的任何prejudice。这是解决问题中描述的问题的解决方案（与您的不同）。
jQuery 是一个库。这是一个要加载的额外文件，要运行更多代码，并且不能帮助任何人学习 JS。首先是基础，然后是库。尤其是在诸如此类的简单问题上。我的意思是，为 3 行代码加载一个库？
@Cerbrus 如果您发布的解决方案不使用 jQuery 并且在一般情况下可以工作，而不会使用无用的 ID 污染 DOM，只会给标记生成增加不必要的复杂性模板和适用于不同的浏览器，那么我们可能会有一些争论。

【解决方案4】：

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

insted of span 你也可以给出类名例如，

<span class="classname">This is required</span>
x.querySelector(".classname").innerHTML

【讨论】：

【解决方案5】：

使用 jQuery：

$('#innerId').siblings()

【讨论】：

OP 没有要求 jquery 解决方案。加载一个庞大的外部库来查找兄弟姐妹是非常过分的。