如何在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'); 
    }); 
}); 

刪除與onclick屬性的工作，當你使用jQuery的想法。

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和first()，使用相同的jQuery過濾器，而不是siblings：

例如

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

或者，你能保證它是下一個元素，使用next作爲@Tim費爾馬倫那樣（有或無的選擇並沒有區別，那麼不妨將其省略）：

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

注意：在這個例子中jQuery(function($){是DOM準備的事件處理程序這是相當方便快捷版$(document).ready(function(){YOUR CODE});，這也傳遞一個局部範圍$值。對於那些錯誤代碼錯誤IIFE，這裏是一個工作示例：http://jsfiddle.net/TrueBlueAussie/az4r27uz/