Использование jQuery для переключения DIV в следующем ряду

Question

Я пытаюсь переключить класс div в build_files_toggle в следующем ряду, когда вы нажимаете build_files_toggld Классифицированная ссылка над ним. Я могу заставить следующую строку свернуться с помощью $ (this) .parent (). Parent (). Next (). SlideToggle (30), но когда я добавляю '.build_files_toggle', он не работает ... Убей меня. Я даже пытался $ (this) .parent (). Parent (). Next (). Children ('. Build_files_toggle'). SlideToggle (30); Но не повезло! Любая идея здесь будет отличной.

Черт, даже действительно хороший учебник по всем селекторам jquery был бы хорош!

  $(".build_files_toggle").click(function()
  {
   $(this).parent().parent().next('.build_files_toggle').slideToggle(30);

  });

    <div class="buildGroup" id="RecentBuilds">
        <table>
            <tr>
                <th>    
                    Build Date
                </th>
                <th>
                    Built By
                </th>                   
            </tr>
            <tr>
                <td>
                    Aug 22nd 3:11 pm
                </td>                   
                <td>
                    <a href="#"  class="build_files_toggle" >View</a>
                </td>                   
            </tr>
            <tr>
                <td colspan="2">
                    <div id="build_files1" class="infoBox_build_files">
                        This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text.
                    </div>
                </td>
            </tr>
        </table>

Answer 1

Не должно быть

.children('.infoBox_build_files')

Полная версия:

$("a.build_files_toggle").click(function() {
  $(this).closest("tr").next().find("div.infoBox_build_files").slideToggle(30);
});

Answer 2

Попробуйте это:

$(".build_files_toggle").click
(
  function()
  {
    $(this)
      .parents("tr:first")
      .next()
      .find(".infoBox_build_files")
      .slideToggle(500);
  }
);

Я думаю, что вы хотите переключить DIV .infoBox_build_files, а не .build_files_toggle.

Я попробовал это на своей машине в IE 7, и она работала нормально. Однако есть две точки: (1) добавить явную ширину как к таблице, так и к столбцам таблицы. Если вы этого не сделаете, исчезающий акт, сделанный функцией slideToggle, будет заметен. (2) 30 миллисекунд для slideToggle, возможно, слишком быстро. Попробуйте увеличить интервал, например, 500 в приведенном выше примере.

Я также рекомендую использовать функцию parents() вместо parent(). Первый собирает предков обернутого набора, и, предоставив селектор «tr: first», вы можете сосредоточиться на родительском элементе строки первой таблицы в контексте. Это позволяет вам «забыть» о том, как выглядит ваша разметка, и более эффективно сосредоточиться на поставленной задаче.

Answer 3

Поскольку у вас есть класс элемента в нужной строке, вы можете просто сделать:

$('.build_files_toggle').click( function() {
  $('.infoBox_build_files').parents('tr').toggle();
} );

Answer 4

Есть много способов снять шкуру с этой кошки. Вот одно предложение:

$("a.build_files_toggle").click(function() {
  $("#build_files1").slideToggle(30);
});

Примечание:"build_files1" - это идентификатор, а не класс. Вы можете сделать это с другим классом:

$("a.build_files_toggle").click(function() {
  $(this).parents("div.buildGroup:first").find("div.infoBox_build_files").slideToggle(30);
});

но нет причин не делать этот конкретный пример с идентификатором.

Я также предлагаю по возможности использовать имя тега в селекторе, а не просто селектор класса «голый» (т. Е. «Div.buildGroup» вместо «.buildGroup». Обычно это происходит намного, намного быстрее (в зависимости от браузера).