在for循环和值更改时添加换行符或类似内容 - jQuery

Question

I have a db table with users and I am creating a hierarchy system.

Currently the top users (with a 1 hierarchy) are shown, and then when clicked I gather all the related users via ajax and display below.

These users have 4 or 5 tiers for their hierarchy. 1 being the highest level.

I want to be able to make a new line of users each time the hierarchy changes.

I query the db and fetch all the users with an order by of the hierarchy number, I then put them into an array, return with JSON and loop through in jQuery:

for(var i=0; i<data.userArray.length; i++){
  var user = data.userArray[i];
  $appendedItems.append(SHOW ALL USERS HERE);
}

Lets say the array is:

hierarchy => 2, 
hierarchy => 2, 
hierarchy => 2,
hierarchy => 3, 
hierarchy => 3, 
hierarchy => 4,

Each time the hierarchy changes, I would like to show a line break or something just to put the users on a new line to denote a lower level.

Thanks.

Answer 1

how I'd do it, obviously your case will be different but you can get the idea:

markup:

<ul id="#users">
    <li data-user-id="3">david</li>
    <li data-user-id="4">frank</li>
</ul>

jQuery:

$('#users').on('click', 'li:not(.exploded)', function() {
    var $user = $(this).addClass('exploded'),
        userId = $user.data('userId'),
        url = '/getUsersChildres?user=' + userId;

    $.getJSON(url).then(function(data) {
        $('<ul>', {
            html: $.map(data.userArray, function(i, user) {
                return $('<li>', {
                    text: user.name,
                    data: {
                        'userId': user.id
                    }
                });
            })
        }).appendTo($user);
    }, function() {
        $user.removeClass('exploded');
    });

    return false;
});

should end up with:

<ul id="#users">
    <li data-user-id="3" class="exploded">david
        <ul>
            <li data-user-id="13">jack</li>
            <li data-user-id="14">paul</li>
        </ul>
    </li>
    <li data-user-id="4">frank</li>
</ul>