面向上层的目标问题

Question

我正在使用以下jquery代码段向每个anime100框添加一个类anime，但是添加到位于anime上一层的<li>，例如，如果用户点击C anime100必须添加anime <li> B个链接。{/ p>

我试过这样做

 $(this).parent().parent().find('.anime').addClass('anime100');
 $(this).parent().parent().parent().find('.anime').addClass('anime100');

但没有效果

$("a").on("click", function(){
     $(this).parent().next('.anime').addClass('newanime');
});

.anime{
height:10px;
width:100px;
background:gold;

}
.newanime{
width:250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <ul class="">
      <li>
         <div class="box">
            <div class="left"><a href="#">A</a></div>
           <div class="anime"></div>
         </div>
 
      </li>
      <li>
         <div class="box">
            <div class="left"><a  href="#">B</a></div>
                      <div class="anime"></div>
         </div>
      </li>
      <li>
         <div class="box">
            <div class="left"><a  href="#">C</a></div>
                      <div class="anime"></div>
         </div>
      </li>
      <li>
         <div class="box">
            <div class="left"><a  href="#">D</a></div>
                      <div class="anime"></div>
         </div>
      </li>
       <li>
         <div class="box">
            <div class="left"><a  href="#">E</a></div>
                      <div class="anime"></div>
         </div>
      </li>     
      <li>
         <div class="box">
            <div class="left"><a  href="#">F</a></div>
                      <div class="anime"></div>
         </div>
      </li>     

Answer 1

听起来您想要使用.closest()和.prev()代替：

$("a").on("click", function() {
  $(this).closest('li').prev('li').find('.anime').addClass('newanime');
});

.anime {
  height: 10px;
  width: 100px;
  background: gold;
}

.newanime {
  width: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="">
  <li>
    <div class="box">
      <div class="left"><a href="#">A</a></div>
      <div class="anime"></div>
    </div>

  </li>
  <li>
    <div class="box">
      <div class="left"><a href="#">B</a></div>
      <div class="anime"></div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="left"><a href="#">C</a></div>
      <div class="anime"></div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="left"><a href="#">D</a></div>
      <div class="anime"></div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="left"><a href="#">E</a></div>
      <div class="anime"></div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="left"><a href="#">F</a></div>
      <div class="anime"></div>
    </div>
  </li>

Answer 2

我相信这会遍历你想要的方式：

＆＃13;

＆＃13;

$("a").on("click", function(){
     $(this)
       .parents('li') // travel up the parents until you find the li tag...
       .prev() // go to the previous sibling
       .find('.anime') // find the anime class
       .addClass('newanime'); // add the additional class
});

＆＃13;

.anime{
height:10px;
width:100px;
background:gold;

}
.newanime{
width:250px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <ul class="">
      <li>
         <div class="box">
            <div class="left"><a href="#">A</a></div>
           <div class="anime"></div>
         </div>
 
      </li>
      <li>
         <div class="box">
            <div class="left"><a  href="#">B</a></div>
                      <div class="anime"></div>
         </div>
      </li>
      <li>
         <div class="box">
            <div class="left"><a  href="#">C</a></div>
                      <div class="anime"></div>
         </div>
      </li>
      <li>
         <div class="box">
            <div class="left"><a  href="#">D</a></div>
                      <div class="anime"></div>
         </div>
      </li>
       <li>
         <div class="box">
            <div class="left"><a  href="#">E</a></div>
                      <div class="anime"></div>
         </div>
      </li>     
      <li>
         <div class="box">
            <div class="left"><a  href="#">F</a></div>
                      <div class="anime"></div>
         </div>
      </li>     

＆＃13;

＆＃13;

＆＃13;