<a href ="" class=""> by using find() in jQuery

Question

I want to know how to add onClass in a tag and also by using jQuery event. I try to approach by using find(). is it right like that coding? please, how to resolve this problem.

$(document).ready(function() { 
 
    $('.tab_cont, .on').each(function(){ 
 
    var topDiv = $('.tab_cont, .on'); \t \t 
 
    var anchors = topDiv.find('ui .screen1 a'); 
 
    var panelDivs = topDiv.find('div.area_cont, div'); 
 

 
    var lastAnchor; 
 
    var lastPanel; 
 
    lastAnchor = anchors.filter('.on'); 
 
    lastPanel = panelDivs.filter('.on'); 
 
\t \t 
 
    anchors.show(); \t \t 
 

 
    anchors.click(function(event) { \t \t 
 
     event.preventDefault(); 
 
     var currentAnchor = $(this); 
 
     currentAnchor.addClass("on"); 
 
     lastAnchor.removeClass("on"); 
 
     lastAnchor = currentAnchor; 
 
     //lastPanel=currentAnchor; 
 
    }); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab_cont on"> 
 
    <ul class="theater_zone screen1"> 
 
     <li class="area0001"> 
 
     <span class="area_zone"> 
 
\t  <a href="javascript:void(0);" class="on"> 
 
\t \t \t <h4>tab1(<em>23</em>)</h4> 
 
\t \t \t <div class="blind">select</div> 
 
\t \t </a></span> 
 
\t <div class="area_cont on"> 
 
\t \t <ul class="area_list d0001"> 
 
\t \t <li><a href="javascript:void(0);" class="100011013">panel1</a></li> 
 
\t \t <li><a href="javascript:void(0);" class="100011018">panel1</a></li> 
 
\t \t <li><a href="javascript:void(0);" class="100019010">panel1</a></li> 
 
\t \t <li><a href="javascript:void(0);" class="100011004">panel1</a></li> 
 
\t \t <li><a href="javascript:void(0);" class="100011009">panel1</a></li> 
 
\t \t </ul> 
 
\t </div> 
 
    </li> 
 
\t <li class="area0002"><span class="area_zone"> 
 
    <a href="javascript:void(0);" class=""> 
 
      <h4>tab2(<em>40</em>)</h4> 
 
    </a></span> 
 
\t <div class="area_cont"> 
 
\t <ul class="area_list d0002"> 
 
\t \t <li><a href="javascript:void(0);" class="100023015">panel2</a></li> 
 
\t \t <li><a href="javascript:void(0);" class="100023030">panel2</a></li> 
 
\t \t <li><a href="javascript:void(0);" class="100023027">panel2</a></li> 
 
\t </ul> 
 
\t </div> 
 
    </li> 
 
    </ul> 
 
    </div>

it doesn't work. I try to approach by using find(). is it right like that coding?.. please, how to resolve this problem.

Answer 1

First, I would simplify your selectors and make the click event independent of the other handlers.

$("a").on("click", function(event) { 
    event.preventDefault(); 

    $("a").removeClass("on"); 
    $(this).addClass("on"); 

}); 

You can remove the classes before adding the new one to simplify your code. No need to traverse the whole dom using find() when you can just clear them all.

If you can provide more explanation as to what you are trying to do beyond just adding a class, I can help more.

Snippet

$(document).ready(function() { 
 

 
    $("span.area_zone a").on("click", function(event) { 
 
    event.preventDefault(); 
 

 
    //remove tab css 
 
    $("span.area_zone a").removeClass("on"); 
 
    $(this).addClass("on"); 
 
    $(this).parent().parent().find('div.area_cont').addClass("on"); 
 

 
    }); 
 

 
    $(".area_list a").on("click", function(event) { 
 
    event.preventDefault(); 
 

 
    //remove panel css 
 
    $(".area_list a").removeClass("on"); 
 
    $(this).addClass("on"); 
 
    
 
    //update the tab 
 
    $("span.area_zone a").removeClass("on"); 
 
    $(this).parent().parent().parent().parent().find('span.area_zone a').addClass("on"); 
 
    }); 
 

 
});

span.area_zone a.on { color:red;} 
 
.area_list a.on { color:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="tab_cont on"> 
 
    <ul class="theater_zone screen1"> 
 
    <li class="area0001"> 
 
     <span class="area_zone"> 
 
    <a href="javascript:void(0);" class="on"> 
 
     <h4>tab1(<em>23</em>)</h4> 
 
     <div class="blind">select</div> 
 
    </a></span> 
 
     <div class="area_cont on"> 
 
     <ul class="area_list d0001"> 
 
      <li><a href="javascript:void(0);" class="100011013">panel1</a></li> 
 
      <li><a href="javascript:void(0);" class="100011018">panel1</a></li> 
 
      <li><a href="javascript:void(0);" class="100019010">panel1</a></li> 
 
      <li><a href="javascript:void(0);" class="100011004">panel1</a></li> 
 
      <li><a href="javascript:void(0);" class="100011009">panel1</a></li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li class="area0002"><span class="area_zone"> 
 
<a href="javascript:void(0);" class=""> 
 
     <h4>tab2(<em>40</em>)</h4> 
 
</a></span> 
 
     <div class="area_cont"> 
 
     <ul class="area_list d0002"> 
 
      <li><a href="javascript:void(0);" class="100023015">panel2</a></li> 
 
      <li><a href="javascript:void(0);" class="100023030">panel2</a></li> 
 
      <li><a href="javascript:void(0);" class="100023027">panel2</a></li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

I'm not exactly sure what you are trying to accomplish here, I'm thinking there is a much cleaner solution to what your trying to do, but I wanted to try to help you out.

Here are some slight modifications to your JavaScript that may help.

$(document).ready(function() { 
    $('.tab_cont.on').each(function() { 
     var topDiv = $(this); 
     var anchors = topDiv.find('.area_zone > a'); 
     anchors.show(); 
     anchors.click(function(event) { 
      event.preventDefault(); 
      var currentAnchor = $(this); 
      if(currentAnchor.is('.on')) { 
       topDiv.find('.area_zone > a:not(.on)').addClass('on'); 
       currentAnchor.removeClass('on'); 
      } else { 
       topDiv.find('.area_zone > a.on').removeClass('on'); 
       currentAnchor.addClass('on'); 
      } 
     }); 
    }); 
}); 

I also created a JSFiddle pageにアプローチする方法もあります。