查找UL组中的所有先前LI

Question

我希望在以下代码中从所选的li中选择所有以前的LI。我猜它是.closest（）和.prev（）或.prevAll（）的某种组合 - 但是却因为从多个父母中选择所有内容而陷入困境。提前谢谢！

<div id="thumbsContainer">
  <div class="categoryContainer">
    <ul>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
    </ul>
  </div>

  <div class="categoryContainer">
    <ul>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
    </ul>
  </div>

  <div class="categoryContainer">
    <ul>
      <li>thing</li>
      <li>thing</li>
      <li class="selected">thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
    </ul>
  </div>
</div>

Answer 1

您可以找到所有以前的li元素，

const getPreviousListItems = (callback) => {
  const previousListItems = [];

  $('li').each((index, elem) => {
    if(!$(elem).hasClass('selected')){
      previousListItems.push(elem);
    }
    else{
      return callback(previousListItems);
    }
  });
};


getPreviousListItems((previousListItems) => {
  console.log(previousListItems);
  $(previousListItems).each((index, elem) => {
    $(elem).css( 'background-color', '#BBDEFB' );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbsContainer">
  <div class="categoryContainer">
    <ul>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
    </ul>
  </div>

  <div class="categoryContainer">
    <ul>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
    </ul>
  </div>

  <div class="categoryContainer">
    <ul>
      <li>thing</li>
      <li>thing</li>
      <li class="selected">thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
    </ul>
  </div>
</div>

如果previousListItems元素位于所选元素之前，则

li组成。

Answer 2

每个li前面有两组li，一个位于与目标li相同的父级中，其他父级位于其他父级中，但预先阻止了目标li }。

为同一级别的li s＆＃39;创建并合并了两个数组，另一个为不同父级内的li。

＆＃13;

＆＃13;

$("li").click(function() {
  var prevLi1 = $(this).closest(".categoryContainer").prevAll(".categoryContainer").find("li");
  var prevLi2 = $(this).prevAll("li");
  var allPrevLis = $.merge(prevLi1, prevLi2);
  //To Display the prev lis
  allPrevLis.each(function() {
    $(this).css('color', 'red')
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbsContainer">
  <div class="categoryContainer">
    <ul>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
    </ul>
  </div>

  <div class="categoryContainer">
    <ul>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
    </ul>
  </div>

  <div class="categoryContainer">
    <ul>
      <li>thing</li>
      <li>thing</li>
      <li class="selected">thing</li>
      <li>thing</li>
      <li>thing</li>
      <li>thing</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用所选元素的prevAll()：

＆＃13;

＆＃13;

$(".selected").prevAll().css("color", "green");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categoryContainer">
    <ul>
      <li>thing</li>
      <li>thing</li>
      <li class="selected">thing</li>
      <li>thing</li>
      <li>thing</li>
    </ul>
  </div>

＆＃13;

＆＃13;

＆＃13;