Show / hide child nodes using jQuery
I am trying to show child nodes (if the "Yes" option is selected) based on the indent value. indent0-> parent node
, indent1 - child node
. The sort order is the order of the nodes in the database.
$( "body" ).on( "click", ".js-show-aspects", function(event) {
var displayLabel = $(this).data('meta-value');
var sort_order = $('.js-data-selector.active:first').data('sort-order');
var indent = $('.js-data-selector.active:first').data('indent');
var rowCount = $('#show_aspects td').length;
for (var i=0;i<rowCount;i++)
{
var hasindent0 =$(this).next().hasClass("indent0");
if((displayLabel=='Yes') && (hasindent0== false)) {
child1 = $("table tr td").filter(function() {
return $(this).prop("class").match(/indent/)});
child = child1.addClass(function (index){ return "sort-order"+(sort_order+1)});
}
}
});
HTML In the bottom html $ aspects, all nodes from the database get
<tbody>
<? foreach($aspects as $a) { ?>
<tr id="show_aspects" class="js-data-selector
<?=($a['active'] == 0) ? "text-warning" :""; ?> "
data-sort-order="<?= $a['sort_order'] ?>"
data-indent="<?= $a['indent']?>" align="left"
data-taxonomy-id="<?=$a['taxonomy_id']?>">
<td class="indent<?=$a['indent']?>
sort-order<?=$a['sort_order']?>"
data-indent="<?= $a['indent']?>">
<? if($a['active'] == 0) {
echo '<strong class="pull-right text-warning">Inactive</strong>';
} ?>
<?=$a['aspect_label']?> :
<span class="aspect-data" data-taxonomy-id="<?=$a['taxonomy_id']?>"></span>
</td>
</tr>
<?}?>
</tbody>
But I can not display child nodes. Any idea how to figure this out?
Edited a question with HTML content.
, , jQuery, $("#id").children().hide();
$("#id").children().show();
. < /" > ( "#id" - DOM node.)
children()
, , /: http://api.jquery.com/children/
( , )