0

Подскажите как обратиться к трем следующим элементам в таблице.

При обращении через nextElementSibling цепляется кроме следующего братского, еще и следующая секция.

var keyAcc = document.getElementsByClassName("keys");
var j;

for (j = 0; j < keyAcc.length; j++) {
  keyAcc[j].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    console.log(panel);
    if (panel.style.display === "table-row") {
      panel.style.display = "none";
    } else {
      panel.style.display = "table-row";
    }
  });
}

//initialize
keysAccordion();
.d-none {
  display: none;
}
<table class="table_info">
  <tr class="table_title">
    <th class="key_name">2 keys
    </th>
    <th class="key_title">Download</th>
    <th class="key_title">Update</th>
    <th class="key_title">Stop</th>
    <th class="fd">
      <img src="img/icon-fd.svg" alt="">
      <span>Face detector</span>
    </th>
    <th class="er">
      <img src="img/icon-er.svg" alt="">
      <span>Em. recogn.</span>
    </th>
  </tr>
  <tr class="keys green">
    <td><span>1</span>Awesome key 1</td>
    <td>
      <a href="#">
        <img src="img/icon-btn-dowld.svg" alt="">
      </a>
    </td>
    <td>
      <a href="#" disabled=disabled>
        <img src="img/upload.svg" alt="">
      </a>
    </td>
    <td>
      <a href="#" disabled=disabled>
        <img src="img/stop.svg" alt="">
      </a>
    </td>
    <td class="check">
      <svg width="9px" height="7px" viewBox="0 0 9 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			        <g id="ic-check" fill="#D0D8FF">
			            <path d="M3.2173913,6.65217391 C3.1014487,6.76811652 2.97101522,6.82608696 2.82608696,6.82608696 C2.6811587,6.82608696 2.55072522,6.76811652 2.43478261,6.65217391 L0,4.2173913 L0.782608696,3.43478261 L2.82608696,5.47826087 L8.26086957,1.18571819e-13 L9,0.782608696 L3.2173913,6.65217391 Z" id="ion-ios-checkmark-empty---Ionicons"></path>
			        </g>
			    </g>
			</svg>
    </td>
    <td class="check">
      <svg width="9px" height="7px" viewBox="0 0 9 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			        <g id="ic-check" fill="#D0D8FF">
			            <path d="M3.2173913,6.65217391 C3.1014487,6.76811652 2.97101522,6.82608696 2.82608696,6.82608696 C2.6811587,6.82608696 2.55072522,6.76811652 2.43478261,6.65217391 L0,4.2173913 L0.782608696,3.43478261 L2.82608696,5.47826087 L8.26086957,1.18571819e-13 L9,0.782608696 L3.2173913,6.65217391 Z" id="ion-ios-checkmark-empty---Ionicons"></path>
			        </g>
			    </g>
			</svg>
    </td>
  </tr>
  <tr class="d-none hidden-buttons-keys">
    <td colspan="3">
      <a href="#">
        <img src="img/icon-btn-dowld.svg" alt="">Download
      </a>
    </td>
  </tr>
  <tr class="d-none hidden-buttons-keys">
    <td colspan="3">
      <a href="#" disabled=disabled>
        <img src="img/upload.svg" alt="">Update
      </a>
    </td>
  </tr>
  <tr class="d-none hidden-buttons-keys">
    <td colspan="3">
      <a href="#" disabled=disabled>
        <img src="img/stop.svg" alt=""> Stop
      </a>
    </td>
  </tr>
  <tr class="keys red">
    <td><span>2</span>Awesome key 2</td>
    <td>
      <a href="#">
        <img src="img/icon-btn-dowld.svg" alt="">
      </a>
    </td>
    <td>
      <a href="#">
        <img src="img/upload.svg" alt="">
      </a>
    </td>
    <td>
      <a href="#">
        <img src="img/stop.svg" alt="">
      </a>
    </td>
    <td class="check">
      <svg width="9px" height="7px" viewBox="0 0 9 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			        <g id="ic-check" fill="#D0D8FF">
			            <path d="M3.2173913,6.65217391 C3.1014487,6.76811652 2.97101522,6.82608696 2.82608696,6.82608696 C2.6811587,6.82608696 2.55072522,6.76811652 2.43478261,6.65217391 L0,4.2173913 L0.782608696,3.43478261 L2.82608696,5.47826087 L8.26086957,1.18571819e-13 L9,0.782608696 L3.2173913,6.65217391 Z" id="ion-ios-checkmark-empty---Ionicons"></path>
			        </g>
			    </g>
			</svg>
    </td>
    <td class="check">
      <span></span>
    </td>
  </tr>
  <tr class="d-none hidden-buttons-keys">
    <td colspan="3">
      <a href="#">
        <img src="img/icon-btn-dowld.svg" alt="">Download
      </a>
    </td>
  </tr>
  <tr class="d-none hidden-buttons-keys">
    <td colspan="3">
      <a href="#" disabled=disabled>
        <img src="img/upload.svg" alt="">Update
      </a>
    </td>
  </tr>
  <tr class="d-none hidden-buttons-keys">
    <td colspan="3">
      <a href="#" disabled=disabled>
        <img src="img/stop.svg" alt=""> Stop
      </a>
    </td>
  </tr>
</table>

А нужно зацепить только 3 следующих братских элемента.

3
  • такое находил, но я не смогу переписать весь аккордеон на jQuery
    – Alex Nikos
    Commented 24 апр. 2019 в 11:31
  • на jQuery была функция обертка для расширений экрана меньше 560 и все. Она по сути на вопрос никак не влияет, я ее и убрал
    – Alex Nikos
    Commented 24 апр. 2019 в 11:35
  • "message": "Uncaught ReferenceError: keysAccordion is not defined",
    – Grundy
    Commented 24 апр. 2019 в 12:37

1 ответ 1

2

Оборачиваем в цикл while и берем по одному 'брату'. Как только встречаем 'брата' без маркированного класса hidden-buttons-keys, прекращаем итерацию.

Демо:

// Функция-обработчик щелчка по таблице.
const clickHandler = function onTableInfoClickHandler(event) {
  // Элемент, по которому был выполнен щелчок.
  const target = event.target;

  // Первый ближайший родительский элемент (или сам элемент),
  // который содержит класс `keys`.
  const element = target.closest('.keys');

  // Если таковой элемент не был найден,
  // то выходим из обработчика.
  if (!element) return;

  // Переключаем элементу класс.
  element.classList.toggle('active');

  // Выбираем братский элемент,
  // который следует за текущим элементом.
  let panel = element.nextElementSibling;

  // Выполняем данную секцию,
  // пока такой элемент существует
  // и он содержит класс `hidden-buttons-keys`.
  while (panel && panel.classList.contains('hidden-buttons-keys')) {
    // Переключаем элементу класс,
    // отвечающий за отображение элемента.
    panel.classList.toggle('d-none');

    // Выбираем следующий элемент.
    panel = panel.nextElementSibling;
  }
}

// Выбираем нашу таблицу.
const table = document.querySelector('.table_info');

// Добавляем слушателя ко всей таблице,
// это будет менее затратно по ресурсам, чем
// вешать функцию-обработчик события на каждую ячейку.
table.addEventListener('click', clickHandler);
.d-none {
  display: none;
}

.keys td:first-of-type {
  cursor: pointer;
}

.green,
.red {
  color: #fff;
}

.green {
  background: green;
}

.red {
  background: red;
}
<table class="table_info">
  <thead>
    <tr>
      <th class="key_name">2 keys</th>
    </tr>
  </thead>
  <tbody>
    <!-- Первая группа элементов -->
    <tr class="keys green">
      <td><span>1</span> Awesome key 1</td>
    </tr>
    <tr class="d-none hidden-buttons-keys">
      <td><a href="#">Download</a></td>
    </tr>
    <tr class="d-none hidden-buttons-keys">
      <td><a href="#">Update</a></td>
    </tr>
    <tr class="d-none hidden-buttons-keys">
      <td><a href="#">Stop</a></td>
    </tr>

    <!-- Вторая группа элементов -->
    <tr class="keys red">
      <td><span>2</span> Awesome key 2</td>
    </tr>
    <tr class="d-none hidden-buttons-keys">
      <td><a href="#">Download</a></td>
    </tr>
    <tr class="d-none hidden-buttons-keys">
      <td><a href="#">Update</a></td>
    </tr>
    <tr class="d-none hidden-buttons-keys">
      <td><a href="#">Stop</a></td>
    </tr>
  </tbody>
</table>

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.