更新：有和没有jQuery的解决方案

Question

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

html是这样的：

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

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

可以像这样搜索HTML吗？

Answer 1

由于<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/

Answer 2

对于单个span元素，它应该非常简单。只需点击链接调用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

希望这有效。它对我有用!!

Answer 3

更新：有和没有jQuery的解决方案

这个答案得到了很多关于用jQuery展示一个例子的downvotes，我决定用vanilla JavaScript添加更多的例子，这样任何人都可以选择是否使用jQuery。

通常，您可以在vanilla 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的隐式知识，但这可能不适用于更复杂的情况 - 对于那些参见下面类的示例。 / p>

使用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元素，该类将使用类“text”警告其兄弟span元素所包含的文本。（当然，类名应该比描述更具描述性。）

Answer 4

使用jQuery：

$('#innerId').siblings()

Answer 5

<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 ，您还可以提供班级名称 例如

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

在javascript中获取附近的兄弟姐妹

5 个答案:

更新：有和没有jQuery的解决方案

没有班级

使用jQuery：

没有jQuery：

使用类

使用jQuery：

没有jQuery：