jqueryにアクセスできない。私はアコーディオンを実装しようとしていますが、コンテンツ要素はヘッダーの直後ではありません。 jqueryを使わずに次の要素をクラス名で取得する
<div class="header">...</div>
<div>
<div class="content">
あなたは私が正しく理解していれば、あなたはヘッダとコンテンツ要素のリストを持ってクリックしたヘッダーノード
<div class="header">
<div>
<div class="content">
[].forEach.call(document.querySelectorAll('.header'), function(header) {
header.addEventListener('click', function(e) {
var content = this.querySelector('.content');
// here, "this" is the header div, and "content" is the content div
// do majick accordion things here
});
});
私はアコーディオンで複数の.contentがあると推測しています –
ことで、これを取得することができますソースの順序で親の子関係を持たないソース順にdocument.querySelectorAllリターン要素は、ここに解決することを念頭に置い：
function headerClickHandler() {
var headers = document.querySelectorAll(".header"),
contents = document.querySelectorAll(".content"),
i, content;
for (i = 0; i < headers.length; i++) {
// loop through all headers until we find "this" element
// i represents its relative position of clicked header in all headers
if (headers[i] === this) {
content = contents[i];
break;
}
}
content.innerHTML += " clicked";
}
var headers = document.querySelectorAll(".header"),
i;
for (i = 0; i < headers.length; i++) {
headers[i].onclick = headerClickHandler;
}<ol>
<li class="header">Header</li>
<li class="header">Header</li>
<li class="header">Header</li>
</ol>
<ol>
<li class="content">Content</li>
<li class="content">Content</li>
<li class="content">Content</li>
</ol>申し訳ありませんが、私のコードで間違いを犯しました。修正版をご覧ください。コンテンツはヘッダー要素内にありません。 – thegreatjedi
にquerySlectorを使用してこれを達成することができます
var contentDiv= document.getElementsByClassName("content");
申し訳ありませんが、私のコードに誤りがありました。更新されたフォームをご覧ください。内容はヘッダーに含まれていません。とにかく、私はちょうど確認したいと思います： 'getElementsByClassName（）'によって返される配列は、ソースコードに現れる順序で要素を含んでいますか？ – thegreatjedi
@thegreatjediアイテムはDOMのトラバーサルオーダーに表示されることが保証されているので、アイテムはソースの順序で表示されます。すべてのヘッダーのリスト内のクリックされたヘッダーの相対的な順序を確認し、それを使用してn番目のコンテンツを選択する必要があります。 –
@thegreatjedi改訂版の回答を見てください。 –
を試すこのdocument.getElementById(header).getElementsByClassName('content');
詳細を編集してください。コード専用と「試してください」の回答は、検索可能なコンテンツが含まれていないため、推奨されません。なぜ誰かが「これを試してみる」べき理由を説明しません。 – abarisone
どのように再帰関数とnextSiblingの使用に関する[（次の要素ではなく取得子供）]
<div class="header" onclick="hasClass(this)">...</div>
<div>
<div class="content"></div>
</div>
<script>
function hasClass(e){
if(e.nextSibling.children === undefined || e.nextSibling.children.length == 0){
hasClass(e.nextSibling); //go next till find class
}
else{
if(e.nextSibling.children[0].className == "content"){
console.log(e.nextSibling.innerHTML); //get class content html
}
}
}
</script>
あなたは 'querySelector'を望みます –
あなたのヘッダー –
のonclickイベントのコードをhttps://jsfiddle.net/link2pk/pkng4jee/2/のように共有できますか？ – link2pk