jQuery 树向上遍历答案

【问题标题】：jQuery Tree Up TraversaljQuery 树向上遍历
【发布时间】：2015-06-03 00:01:04
【问题描述】：

简单的问题。我正在尝试使用树中的面板指示器类来定位“i”标签。此外，我需要从面板编辑“i”标签中删除“隐藏”类。这是 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>

这是脚本代码。虽然它有效，但它似乎是一种让它工作的草率方式。所以我只是想知道如何正确编写它，以便它将'rotate'类设置为带有面板指示器类的'i'标签。

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

【问题讨论】：

标签： javascript jquery tree tree-traversal

【解决方案1】：

改用“.closest”：

<!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>

来源：https://api.jquery.com/closest/

编辑：在你的情况下：

$('.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() 不会从<a> 到i.panel-indicator。但是您可以使用它从<a> 到div.panel-heading，然后再从find() 到i.panel-indicator。
我也无法让它工作。不过，我将其设置在 jsfiddle 中。 jsfiddle.net/e3hzoxee

【解决方案2】：

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

【讨论】：