jQuery Tree Up Traversal

Question

Simple question. I'm trying to target the 'i' tag with the panel-indicator class in the tree. Additionally I need to remove the 'hide' class from the panel-edit 'i' tag. Here's the HTML:

<div class="panel panel-default">
     <div class="panel-heading" role="tab" id="headingOne"> 
          <i class="panel-indicator glyphicon glyphicon-chevron-down pull-right"></i>
          <i class="panel-edit glyphicon glyphicon-pencil pull-right hide"></i>
          <h4 class="panel-title" id="-collapsible-group-item-#1-">
               <a data-toggle="collapse" data-parent="#collapseOne" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">System Details</a>
               <a class="anchorjs-link" href="#-collapsible-group-item-#1-"><span class="anchorjs-icon"></span></a>
          </h4>
     </div>
</div>

Here's the script code. Though it works, it seems like a sloppy way to get it to work. So I'm just wanting to know how to write it correctly so that it sets the 'rotate' class to the 'i' tag with the panel-indicator class.

$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
    $(this).addClass("open");
   $(this).parent().prev('i.panel-indicator').addClass('rotate');
} else if (
    $(this).hasClass("open")) {
       $(this).removeClass('open');  
        $(this).parent().prev().prev('i.panel-indicator').removeClass('rotate');
    }
});

score 0 · Answer 1 · answered Jun 03 '15 at 00:06

Try '.closest' instead:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>closest demo</title>
  <style>
  li {
    margin: 3px;
    padding: 3px;
    background: #EEEEEE;
  }
  li.hilight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul>
  <li><b>Click me!</b></li>
  <li>You can also <b>Click me!</b></li>
</ul>
 
<script>
$( document ).on( "click", function( event ) {
  $( event.target ).closest( "li" ).toggleClass( "hilight" );
});
</script>
 
</body>
</html>

source: https://api.jquery.com/closest/

Edit: in your case:

$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
    $(this).addClass("open");
   $(this).closest('i.panel-indicator').addClass('rotate');  //edited line
} else if (
    $(this).hasClass("open")) {
       $(this).removeClass('open');  
        $(this).closest('i.panel-indicator').removeClass('rotate');  // edited line
    }
});

`closest()` won't get from the `` to the `i.panel-indicator`. But you could use it to get from the `` to the `div.panel-heading` and then `find()` your way down to the `i.panel-indicator`. — showdev, Jun 03 '15 at 00:13
I couldn't get that to work either. I set it up in a jsfiddle though. http://jsfiddle.net/e3hzoxee/ — Jason Tremain, Jun 03 '15 at 00:17

score 0 · Answer 2 · answered Jun 03 '15 at 01:10

$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
    $(this).addClass("open");
   $(this).closest('.panel-heading').find('i.panel-indicator').addClass('rotate'); 
   $(this).closest('.panel-heading').find('i.panel-edit').removeClass('hide'); 
} else if (
    $(this).hasClass("open")) {
       $(this).removeClass('open');  
       $(this).closest('.panel-heading').find('i.panel-indicator').removeClass('rotate');
       $(this).closest('.panel-heading').find('i.panel-edit').addClass('hide');  
    }
});

jQuery Tree Up Traversal

2 Answers2