Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выборка между соседями (https://javascript.ru/forum/jquery/77868-vyborka-mezhdu-sosedyami.html)

happy_Mikhail 27.06.2019 10:29

Выборка между соседями
 
Здравствуйте, подскажите пожалуйста как справиться с такой задачей: есть таблица в которой теги tr имеют разный стиль, для простоты назовем class1 и class2
<tr class="class1"></tr>
<tr class="class2"></tr>
<tr class="class2"></tr>
<tr class="class1"></tr>
<tr class="class1"></tr>
<tr class="class2"></tr>
<tr class="class2"></tr>
<tr class="class2"></tr>
<tr class="class1"></tr>

Вопрос, как при клике на tr с классом class1 выбрать tr class2, до следующего tr class1. То есть если кликнуть на первый tr должны выбраться бы второй и третий tr?

рони 27.06.2019 11:01

happy_Mikhail,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td{
     height: 35px;
     background-color: hsl(328, 100%, 54%);
     width: 200px;
  }
  .class2 td{
     background-color: hsl(34, 44%, 69%);
  }
  .select td{
      background-color: hsl(203, 92%, 75%);
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
     $("table").on("click",  ".class1", function() {
     $(this).nextUntil(".class1").addClass("select");
})
});
  </script>
</head>

<body>
    <table>
<tr class="class1"><td></td></tr>
<tr class="class2"><td></td></tr>
<tr class="class2"><td></td></tr>
<tr class="class1"><td></td></tr>
<tr class="class1"><td></td></tr>
<tr class="class2"><td></td></tr>
<tr class="class2"><td></td></tr>
<tr class="class2"><td></td></tr>
<tr class="class1"><td></td></tr>

    </table>
</body>
</html>

happy_Mikhail 27.06.2019 11:37

Отлично спасибо большое


Часовой пояс GMT +3, время: 12:04.