CODEWITHSUNDEEP
jquery
Behseini
Behseini

Reputation: 6328

Facing Issue on Targeting A div on Upper level

I am using following jquery snippet to add a class anime100 to each anime box but to the anime which is sitting on one level upper <li> for example if user clicks on C the anime100 must add to anime in <li> with B link.

I tried doing this like

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

but didn't work

$("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>

Upvotes: 0

Views: 23

Answers (2)

Anthony Gray
Anthony Gray

Reputation: 384

I believe this will traverse the DOM how you are intending:

$("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
});
.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>

Upvotes: 1

J. Titus
J. Titus

Reputation: 9690

It sounds like you want to use .closest() and .prev() instead:

$("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>

Upvotes: 1

Related Questions