Как получить несколько строк html () в jQuery

Question

Я довольно новичок в jQuery ... пока что я впечатлен. Но сегодня я столкнулся с ситуацией, которая доставляет мне неприятности. Я хочу использовать .html (), чтобы получить некоторый необработанный текст и использовать его в селекторе, но эта функция возвращает только первый элемент.

В следующей структуре, как я могу получить ВСЕ элементы "toggle_containerLG", которые будут отображаться при нажатии на триггер "Some Header"?

<h6 class="trigger active">Some Header</h6>
<ul>
    <li><a href="#" class="trigger">Title One</a></li>
    <li><a href="#" class="trigger">Title Two</a></li>
    <li><a href="#" class="trigger">Title Three</a></li>
</ul>   

<div class="toggle_containerLG" id='Title_One'></div>  <!-- show these! -->
<div class="toggle_containerLG" id='Title_Two'></div>
<div class="toggle_containerLG" id='Title_Three'></div>
<div class="toggle_containerLG" id='Title_Four'></div> <!-- not this one! -->

Я не могу использовать $ (". Toggle_containerLG"), потому что есть другие, которые я не хочу расширять ... Я просто хочу, чтобы те, перечисленные в "Some Header". Похоже, должен быть простой способ сделать это ... и я просто скучаю по нему, потому что я не очень хорошо знаю jQuery.

Answer 1

Вы можете выполнить цикл через <ul>, следующий за заголовком, если хотите использовать .each(), например:

​$("h6.trigger").click(function() {
    $(this).next("ul").find("a").each(function() {
        $("#" + $(this).text().replace(" ","_")).slideToggle();
    });
});​​​​​​​​​​

Вы можете увидеть демо здесь

Лучшим подходом может быть использование атрибута href для идентификатора, например:

<a href="#Title_One" class="trigger">Title One</a>

Тогда вы можете использовать jQuery следующим образом:

$(".trigger").click(function() {
    $(this).next("ul").find("a").each(function() {
        $(this.hash).slideToggle();
    });
});​

Здесь вы можете увидеть такую ​​демонстрацию