jQuery树向上遍历

jQuery Tree Up Traversal

本文关键字：遍历 jQuery 更新时间：2023-09-26

简单的问题。我试图将"I"标签与树中的面板指示器类作为目标。此外，我需要从面板编辑' I '标签中删除'hide'类。这是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-indicator类。

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

尝试。最近的相反:

<!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
    }
});

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