jQuery를 사용하여 페이지의 H4 제목을 옵션으로 사용하여 선택 목록을 만들려면 어떻게해야합니까?

Question

페이지에서 H2, H3 또는 H4 제목을 모두 가져 와서 모든 옵션이 페이지 제목 인 <select> 상자를 만드는 데 사용하고 싶습니다. 여기에는 값이 포함되어야합니다. 결국 선택 상자를 사용하여 이벤트를 트리거하려고합니다. 누군가가 제목을 선택할 때마다 각 제목 다음에 해당하는 파고 그래프가 fadeIn()이고 보이는 모든 단락은 fadeOut()이됩니다.

예를 들어, 페이지는 다음과 같습니다 상상 :

<select> 
    <option value="Some title 1">Some title 1</option> 
    <option value="Some title 2">Some title 2</option> 
</select> 

<h4>Some title 1</h4> 
<p>Paragraph that followstitle 1</p> 

<h4>Some title 2</h4> 
<p>Paragraph that followstitle 2</p> 

내가 jQuery를 1.4.2을 사용하고 불행하게도,이 설정을 변경할 수 없습니다

<select></select> 

<h4>Some title 1</h4> 
<p>Paragraph that followstitle 1</p> 

<h4>Some title 2</h4> 
<p>Paragraph that followstitle 2</p> 

가로 바뀝니다.

Answer 1

각각 H4 태그를 통해 대하여 반복하고 각각에 대한 옵션을 만들기 :

$('h4').each(function() { 
    $('select').append('<option value="' + $(this).text() + '">' + $(this).text() + '</option>'); 
}); 

Answer 2

document.querySelector은 CSS 선택기 매칭 요소의 목록을 생성한다. 먼저이를 사용하여 <select> 요소를 찾은 다음 <option>을 추가 한 다음 .querySelectorAll()을 사용하여 옵션을 추가하는 모든 제목을 찾습니다. 각 <option>을 작성한 후에 원래 표제에서 .textContent 특성으로 복사합니다.

var selector = document.querySelector('select'); 

var titles = document.querySelectorAll('h2, h3, h4'); 
for (var i = 0; i < titles.length; i++) { 
    var titleOption = document.createElement('option'); 
    titleOption.textContent = titles[i].textContent; 
    titleOption.value = titles[i].id; 

    selector.appendChild(titleOption); 
} 

각 <option>의 value 속성은 타이틀 내지 표제 소자의 ID로 설정된다. 당신의 제목 모든 ID를 가지고있는 한,이 사람들이 선택 할 때 당신이 쉽게 이동할 수 있습니다 :

selector.addEventListener('change', function() { 
    document.location.hash = selector.value; 
}); 

이 in this fiddle 그것을 사용해보십시오.

Answer 3

이것은 옵션을 추가하고 jQuery로 문자열을 만들지 않고 옵션을 추가하고 select 이벤트에서 선택된 값을 산술로 제외하고 H4 태그 다음에 오는 모든 표시 단락을 fadeOut하는 변경 이벤트 처리기를 연결합니다.

$('select').append(function() { 
    return $.map($('h4'), function(h4) { return $('<option />', {text: $(h4).text()}) }); 
}).change(function() { 
    var p = $('h4:contains('+this.value+')').next('p'); 
    $('h4 + p').not(p).fadeOut(); 
    p.fadeIn(); 
}).trigger('change'); 

FIDDLE