Выберите next () с помощью jQuery - PullRequest
Новая
       16

Выберите next () с помощью jQuery

1 голос
/ 22 декабря 2011

У меня есть div.expander, которая является кнопкой, чтобы показать / скрыть все строки таблицы (tr) в следующей (следующей) таблице.

У меня проблема с выбором строки таблицы для открытия и закрытия.Мой код открывает и закрывает все tr на странице (есть 3 таблицы) с помощью слайда класса, но я хочу закрыть только все в таблице next из нажатой области divЯ попробовал несколько вещей, таких как 

 $(this).find('tr.slider').toggleClass('hidden');
 $(this).next('tr.slider').toggleClass('hidden');

$('.expander').click(function() {
  $('tr.slider').toggleClass('hidden');
  $(this).toggleClass('closed');
  if ($(this).attr('class').split(' ').slice(-1) == 'closed') {
     $(this).html('Hide Details');
     }
  else {
    $(this).html('View Details');
  }
});

Ниже приведена моя структура HTML; 

<div class="edit-basket">
<a href ="#"><img src="/images/edit16_ico.png" width="16" height="18" alt="edit icon" /><p>Edit</p></a>
</div>
<div class = "tbl-title">
<h3>Journey 2</h3>
</div>


<table id="journey1"  cellspacing ="0" class="tbl basket">
<tbody>
<tr class="odd">
    <td  colspan="3"> <h3>Origin - Destination</h3></td><td colspan="2" class="top-right-corner"><div class="expander">View Details</div>
</td>
</tr>
<tr class="odd slider">

Ответы [ 3 ]

0 голосов
/ 22 декабря 2011

Я предполагаю, что ваш HTML выглядит следующим образом: 

<div class="expander">...</div>
<table>...</table>

<div class="expander">...</div>
<table>...</table>

<div class="expander">...</div>
<table>...</table>

Если это так, вы, вероятно, слишком много работаете.Вы можете просто скрыть таблицу. 

$(this).next().hide(); // or show() depending on the state of your expander

Или, если вы действительно хотите использовать свои классы и скрыть строки. 

$(this).next().find('tr.slider').toggleClass('hidden');
0 голосов
/ 22 декабря 2011 
$('.expander').click(function() {
   $(this).next('table').find('tr.slider').toggleClass('hidden');
   ...

учитывая, что ваша структура DOM выглядит следующим образом: 

<div class="expander">-</div>
<table>
    <tr>
    ...
0 голосов
/ 22 декабря 2011

Описание

Если вы хотите скрыть все строки, вы можете скрыть всю «следующую» таблицу.

Образец 

$('.expander').click(function() {
  var nextTable = $(this).next();
  nextTable.toggleClass('hidden');

  if (nextTable.attr("class") == "") {
     $(this).html('Hide Details');
  }
  else {
    $(this).html('View Details');
  }
});

Дополнительная информация

jsFiddle Демонстрация

...