par...">

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.

+4
source share
1 answer

, , jQuery, $("#id").children().hide(); $("#id").children().show();. < /" > ( "#id" - DOM node.)

children() , , /: http://api.jquery.com/children/

( , )

0

Source: https://habr.com/ru/post/1612896/


All Articles