Question

我试图将slideUp()表行作为一个元素，将另一行作为不同的元素。

示例 - 我有这样的事情：

<table>
  <tr> .. </tr> <!-- slideUp -->
  <tr> .. </tr> <!-- slideUp -->
  <tr> .. </tr> <!-- I will click on this -->
  <tr> .. </tr> <!-- slideUp -->
  <tr> .. </tr> <!-- slideUp -->
</table>

但是我不希望将每一行作为元素滑动，但每行都归为一个元素

另一个例子： PS：我可以点击任何DIV！点击后面的每个div将作为一个元素，后面的每个div将作为一个元素

<div>
  <div> .. </div> <!-- slideUp -->
  <div> .. </div> <!-- slideUp -->
  <div> .. </div> <!-- I will click on this -->
  <div> .. </div> <!-- slideUp -->
  <div> .. </div> <!-- slideUp -->
</div>

我想让它表现得像（但这不是有效的HTML）：

<table>
   <div class="this-will-slide-up> 
       <tr> .. </tr>
       <tr> .. </tr>
       <tr> .. </tr>
   </div>
   <div class="I-will-click-on-this>
       <tr> .. </tr>
   </div>
   <div class="this-will-slide-up> 
       <tr> .. </tr>
       <tr> .. </tr>
       <tr> .. </tr>
   </div>
</table>

<script>
   $('I-will-click-on-this').click(function() {
      $('this-will-slide-up').slideUp();
   });
<script>

我需要动态，而不是静态，所以我可以用某些东西包围元素，我可以点击任意一行!! 我正在寻找 Javascript 解决方案，而不是HTML。

我希望你能理解:) 谢谢你的任何想法。

Answer 1

您可以使用.nextUntil()

获取每个元素的所有后续兄弟，但不包括由传递的选择器，DOM节点或jQuery对象匹配的元素。

＆＃13;

$('.I-will-click-on-this').click(function() {
  $(this).nextUntil('.I-will-click-on-this').slideToggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="I-will-click-on-this">
    I-will-click-on-this
  </div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div class="I-will-click-on-this">
    I-will-click-on-this
  </div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
</div>

＆＃13;

SlideUp将更多元素作为一个元素

1 个答案: