JQuery - выбор первого экземпляра id класса div на странице

Question

Я хочу выбрать первый экземпляр id из формы volume_header_ + id #, которая появляется на странице. Если я явно помещаю id #, например volume_header_123, код работает. Но когда я пытаюсь заменить это с помощью универсального селектора, чтобы выбрать первое вхождение, не имеет значения, что такое id #, все ломается.

<div class="volume_wrapper"> 
    <div id="volume_header_123" class="volume_header"> 
    … 
    </div> //end volume_header_123 
    <div id="volume_issues_123" class="volume_issues" style="display: block;"> 
    <div class="issue_wrapper"> 
     <div id="issue_header_123_6" class="issue_header"> 
     … 
     </div> //end issue_header_123_6 
     <div id="issue_toc_123_6" class="issue_toc" style="display: none;"> 
     <div class="toc_item"> 
      … 
     </div> //end toc_item 
     </div> //end issue_toc_123_6 
    </div> //end issue_wrapper 
    </div> //end volume_issues_123 
</div> //end volume_wrapper 

Следующий код работает правильно, когда явно указав идентификатор Div, но мне нужно, чтобы сделать его общим, так он выбирает первое вхождение, независимо от ид # приложенного к концу volume_header_ или volume_issues_.

 jQuery('#volume_header_123').css('border-bottom', '1px solid #cc0000'); 
     jQuery('#volume_header_123').addClass('selected'); 
     jQuery('#volume_issues_123').slideDown(50); 

Я экспериментировал с .EQ (0): во-первых, и несколько других селекторы в соответствии с некоторыми из другого ответа, данного на этом сайте, но я не могу найти правильный синтаксис.

Answer 1

$ («.volume_header») .Первый(). Скрыть()

Это выбирает первый элемент с классом volume_header, а затем скрыть его. Замените вызов hide необходимыми вызовами функций.

Как вы используете динамические идентификаторы просто относятся к первому элементу с именем класса вместо

Answer 2

Что-то подобное может работать:

$("div[id^='volume_issues_']").first(); 

Проверить документ для этого: http://api.jquery.com/attribute-starts-with-selector/. Атрибут начинается с селектора

Answer 3

Или вы можете использовать этот код, как селектор ребенка:

$('.volume_wrapper > .volume_header'); 

Answer 4

Взгляни на этой скрипке :
http://jsfiddle.net/6wp44kc3/
В моем примере я использую:

$("p", "div").eq(0).html("ha");

Я использую eq для выбора тега первого абзаца в области элемента div. Затем я устанавливаю html тега абзаца на ha. Использование eq таким образом позволит вам выбрать первый элемент.

Answer 5

Другая альтернатива:

$($("div").get(0)).hide();