如何在Javascript中获取同级元素（div）？

所以我有这个HTML：

<div class="tip-box">
    <div class="tip-title" onclick="toggleTip()">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>

希望这是显而易见的，但它不起作用。使用

.sibbins（）

似乎不能以这种方式工作

---

正确的解决方案是什么？要获取某个类型或某个类的下一个同级，然后隐藏/显示它？

可以使用Jquery函数

<div class="tip-box">
    <div class="tip-title">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>

$(document).ready(function(){
    $('.tip-title').click(function(){
        $(this).siblings(".tip-content").toggleClass("hidden");
    });
});

提示1
提示1内容

$（文档）.ready（函数（）{
$（'.tip title'）。单击（函数（）{
$（this）.this（“.tip content”）.toggleClass（“隐藏”）；
});
});

你也可以用这个

<div class="tip-box">
    <div class="tip-title" onclick="toggloTip(this)">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>


<script>
function toggloTip(elm) {
    $(elm).siblings(".tip-content").toggleClass("hidden");
}
</script>

提示1
提示1内容

功能TOGGOLOTIP（elm）{
$（elm）.同胞（“.tip content”）.toggleClass（“隐藏”）；
}

这个JavaScript怎么样：

$(function(){
    $('.tip-box').on('click', '.tip-title', function(){
        $(this).next('.tip-content').toggleClass('hidden');
    });
});

---

在使用jQuery时，不要使用

onclick

属性。

您可以使用纯javaScript和节点的

nextElementSibling

属性，如下所示， 我想你想和兄弟姐妹一起做这个手术

函数getChildrens（n，选择器）{ var节点=[]； while（n.nextElementSibling！=null）{ if（n.nextElementSibling.hasOwnProperty（'classList'））{ if（n.nextElementSibling.classList.contains（选择器））{ //返回n.nextElementSibling； nodes.push（n.nextElementSibling）； } } n=n.nextElementSibling； } 返回节点； }; 函数GetSides（n，选择器）{ 返回getChildrens（n，选择器）； } 功能切换提示（elem）{ var Sides=GetSides（元素，“tip内容”）； 如果（长度>0）{ 对于（变量i=0；i<1.length；i++）{ 兄弟[i].classList.toggle（“隐藏”）； } } }

。隐藏{
显示：无；
}

提示1
提示1内容

以前的答案都没有，甚至连那一个都没有，实际上解释了问题以及他们的解决方案为什么有效

问题是内联

onclick

处理程序不会传递其当前上下文。在

onclick=”“

JavaScript代码

中，此

是单击的元素。一旦您调用了一个全局函数（比如您的

toggleTip

），该上下文就会丢失。函数接收的

此

是

窗口

，而不是元素

对于原始JavaScript代码，通常的快速修复方法是将

此

作为参数传递给全局函数

<div class="tip-box">
    <div class="tip-title">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>

$(document).ready(function(){
    $('.tip-title').click(function(){
        $(this).siblings(".tip-content").toggleClass("hidden");
    });
});

e、 g

并在函数中接收如下参数：

function toggleTip(element) {
    $(element).siblings(".tip-content").toggleClass("hidden");
}

然而，在使用jQuery时，内联事件处理程序实际上是个坏主意。它们无缘无故地将事件注册与事件处理程序代码分开，并且不允许在同一元素上有多个相同类型的事件处理程序。它们还绕过jQuery使用的相当酷的事件冒泡系统

使用jQuery时，首选的替代方法是使用jQuery选择元素，使用jQuery一步连接事件：

由于您只需要后面的元素，并且可能会添加更多对，因此更好的选择是使用具有相同jQuery筛选器的

nextAll

和

first（）

，而不是

同级

：

e、 g

或者，如果您可以保证它是下一个元素，请像@Tim Vermaelen所做的那样使用

next

（带或不带选择器都没有区别，所以最好省去它）：

---

注意：在本例中，

jQuery（function（$）{

是一个DOM就绪事件处理程序，它是

$（document）.ready（function（）{YOUR code}）的一个相当方便的快捷版本；

，它还传递一个本地范围的

$

值。对于那些将此代码误认为不正确的人，这里有一个工作示例：

这里是另一个非JQuery答案

要获取下一个元素同级，请使用：

var nextElement = element.nextElementSibling;

var previousElement = element.previousElementSibling;

要获取上一个元素同级，请使用：

var nextElement = element.nextElementSibling;

var previousElement = element.previousElementSibling;

要获取元素索引，请使用：

var index = Array.prototype.slice.call(element.parentElement.children).indexOf(element);

如果位于第一个元素，则previousElementSibling值将为null

---

如果您位于最后一个元素，则nextElementSibling值将为空。

类似吗？问题是

这不是您所期望的。@JoshCrozier在这里有正确的想法。您只是忘记了将单击的上下文传递给函数。@JoshCrozier我想他是说我忘了。很抱歉。谢谢，您的解决方案非常有效。：-）@JoshCrozier ha是的，我在和OP谈话，说你做得对：）你可以使用纯Javascript，但是为什么你要在他们已经使用一行jQuery的情况下引入那么多新代码（只是目前不正确）？这不实用，更不用说有用了。对不起，你可能是对的，但我只是给出了另一种可能对其他人有用的解决方案。不在问题的范围内。任何人发现这一点都会看到“
onclick=”“
调用jQuery时没有正确的
This
”问题，不用担心用超过20行的原始JS重新实现一行jQuery。对不起：（我很欣赏纯JS的回答，问题是“如何在Javascript中获得同级元素（div）”因此，我认为这在范围之内。委托事件处理程序似乎有些过火，但你的回答比Kamruzzaman的系列投票结果更明智。+1我不得不为你解释“为什么”不使用内联onclick处理程序。尽管有一个问题，jQuery的DOM就绪有许多快捷方式，但您的似乎有点不正确…如果我是正确的，
$
不会被传递。正确的方式应该是IIFE=>
（函数（$）{}（window.jQuery））
@Tim Vermaelen:不，它不是一个生命。它是jQuery提供的一个快捷DOM就绪函数，它将引用作为第一个参数传递给自身。：）我知道它们，这就是为什么它有某种气味……如果你明白我的意思……让我很快测试一下。@Tim Vermaelen:基本上是
$（function（）{}）；
DOM就绪快捷方式，带参数。相信我，它是正确的
var previousElement = element.previousElementSibling;

var index = Array.prototype.slice.call(element.parentElement.children).indexOf(element);