jQuery树遍历
[英]jQuery Tree Up Traversal
问题描述
简单的问题。 我试图用树中的panel-indicator类定位'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>
这是脚本代码。 尽管它可以工作，但似乎让它工作起来很草率。 所以我只是想知道如何正确地编写它，以便它使用panel-indicator类将'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');
}
});
2 个解决方案
解决方案1
0 2015-06-03 00:06:19
尝试使用“ .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
}
});
解决方案2
0 2015-06-03 01:10:49
$('.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树遍历-上升树但不下降
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.