jquery를 사용하지 않고 클래스 이름으로 다음 요소 가져 오기

jquery에 액세스 할 수 없습니다. 나는 아코디언을 구현하려고하는데, content 엘리먼트는 헤더 바로 뒤에 있지 않다. jquery를 사용하지 않고 클래스 이름으로 다음 요소 가져 오기

<div class="header">...</div> 
    <div> 
    <div class="content">

그래서 나는 다음 콘텐츠 클래스가 HTML 소스 코드에 다음 요소를 얻기 위해 필요한 헤더에 onclick 이벤트를 처리 할 수있는 기능을 추가 해요 : 그것은 다음과 같은 무언가이다. 어떻게하면 될까요? 만약 내가 제대로 이해하고

출처

2016-09-01 thegreatjedi

당신은'querySelector'을 원합니다 –

당신은 헤더 –

의 onclick 이벤트 코드를 https://jsfiddle.net/link2pk/pkng4jee/2/와 공유 할 수 있습니까? – link2pk

-1

당신은 당신이 클릭 된 헤더 노드

<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 
    }); 
});

출처

2016-09-01 05:02:52

나는 하나 이상의 .content가있을 것입니다 accordian으로 짐작하고 있습니다 –

하여이 작업을 얻을 수 있습니다, 당신이 할 헤더와 내용 요소의 목록이 소스 순서로 상위 하위 관계가 없습니다. 소스 순서 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>

출처

2016-09-01 05:06:17

죄송합니다, 내 코드에서 실수를했습니다. 수정 된 버전을 확인하십시오. 내용이 헤더 요소 안에 없습니다. – thegreatjedi

에 사용 querySlector을 달성 할 수

var contentDiv= document.getElementsByClassName("content");

출처

2016-09-01 05:06:42

죄송합니다. 내 코드에서 오류가 발생했습니다. 업데이트 된 양식을 참조하십시오. 내용이 머리글에 없습니다. 어쨌든, 난 그냥 확인하고 싶습니다 :'getElementsByClassName()'에 의해 반환 된 배열이 소스 코드에 나타나는 순서대로 요소를 포함합니까? – thegreatjedi

@ thegreatjedi 항목이 DOM 순회 순서에 표시되도록 보장합니다. 예, 항목이 소스 순서로 나타납니다. 모든 머리글 목록에서 클릭 한 머리글의 상대 순서를 확인한 다음이를 사용하여 n 번째 콘텐츠를 선택해야합니다. –

@thegreatjedi 개정 된 답변을 참조하십시오. –

-1

시도이 document.getElementById(header).getElementsByClassName('content');

출처

2016-09-01 06:14:50

자세한 내용을 편집하십시오. 코드 전용 및 "시도하십시오"답변은 검색 가능한 콘텐츠가 없으므로 권장하지 않으며 누군가가 "시도해"야하는 이유를 설명하지 않습니다. – 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>

출처

2016-09-01 06:55:55

jquery를 사용하지 않고 클래스 이름으로 다음 요소 가져 오기

답변

관련 문제