如何在Javascript中獲取同級元素（div）？

Question

所以我有這個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>

而這個JavaScript：

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

希望很明顯，這應該做什么，但它不起作用。 使用.siblings()似乎無法以這種方式工作。

正確的解決方案是什么？ 要獲取某個類型或某個類的下一個同級，然后隱藏/顯示它？

Answer 1

您可以使用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");
    });
});

你也可以用這個

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

Answer 2

這個JavaScript怎么樣：

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

刪除使用jQuery時使用onclick屬性的想法。

Answer 3

您可以將純javaScript與節點的nextElementSibling屬性一起使用，如下所示，我想您想對同級對象執行此操作。

 function getChildrens(n, selector) { var nodes = []; while (n.nextElementSibling != null) { if (n.nextElementSibling.hasOwnProperty('classList')) { if (n.nextElementSibling.classList.contains(selector)) { //return n.nextElementSibling; nodes.push(n.nextElementSibling); } } n = n.nextElementSibling; } return nodes; }; function getSiblings(n, selector) { return getChildrens(n, selector); } function toggleTip(elem) { var siblings = getSiblings(elem, "tip-content"); if (siblings.length > 0) { for (var i = 0; i < siblings.length; i++) { siblings[i].classList.toggle("hidden"); } } } 

 .hidden { display: none; } 

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

Answer 4

以前的答案都不對，甚至不是串行upvoted一個），實際上說明了這個問題， 為什么他們的解決方案的工作。

問題在於，內聯onclick處理程序不會傳遞其當前上下文。 在onclick="" JavaScript代碼中， this是單擊的元素。 一旦調用了全局函數（如您的toggleTip ），該上下文就會丟失。 在this函數接收是window ，而不是元件。

對於原始JavaScript代碼，通常的快速解決方案是將this作為參數傳遞給全局函數。

例如

onclick="toggleTip(this)" 

並在函數中接收如下參數：

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

但是 ，當您使用jQuery時，內聯事件處理程序實際上不是一個好主意。 它們無緣無故地將事件注冊與事件處理程序代碼分開，並且不允許在同一元素上使用多個相同類型的事件處理程序。 他們還繞過了jQuery使用的相當酷的事件冒泡系統。

與jQuery相比，首選的替代方法是使用jQuery選擇元素，然后使用jQuery 在一個步驟中連接事件：

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

因為您只想要nextAll的元素，並且可能會添加更多對，所以更好的選擇是使用具有相同jQuery過濾器的nextAll和first() ，而不是siblings ：

例如

jQuery(function($){
    $('.tip-title').click(function(){
        $(this).nextAll(".tip-content").first().toggleClass("hidden");
    });
});

或者，您可以保證它是next元素 ，就像@Tim Vermaelen所做的那樣使用next （帶有或不帶有選擇器沒有影響，因此不妨將其省略）：

jQuery(function($){
    $('.tip-title').click(function(){
        $(this).next().toggleClass("hidden");
    });
});

注意：在此示例中， jQuery(function($){是DOM就緒事件處理程序 ，它是$(document).ready(function(){YOUR CODE});便捷版本，它還傳遞了本地范圍的$對於那些將此代碼誤認為錯誤的IIFE的人 ，下面是一個有效的示例： http : //jsfiddle.net/TrueBlueAussie/az4r27uz/

Answer 5

這是另一個非JQuery答案。

要獲取下一個元素同級，請使用：

var nextElement = element.nextElementSibling;

要獲取先前的元素同級，請使用：

var previousElement = element.previousElementSibling;

要獲取元素索引，請使用：

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

如果您位於第一個元素，則previousElementSibling值將為null。

如果您位於最后一個元素，則nextElementSibling值將為null。