jQuery insert elements after nearest number in found set

Question

Trying to find a way to order a dynamically generated list of names that have itereactive sub menus in alphabetical order of surname. The script first populates a list of active users and then updates it based on user activity removing inactive users and appending active users.

Instead of appending these at the bottom of the container I want to insert them into the list in alphabetical order of surname integrating it with those already there.

Taking those already there and putting them into an array would interrupt any user activity on the interactive sub menus each of these has.

I'm thinking that when the content is generated we could assign it a number in on the div (data-sortorder for example). That number would be generated based on the surname of each user. How then would we be able to insert new content based on the nearest sortorder value that is smaller than the current sortorder, or is there a better way of doing this.

// Content that is inserted

<div data-id="" data-sortorder="">
  <div class="text"> Jerry Smith </div>
  <div class="submenu"> ... </div>
</div>

// Example

Lets say this already exists in the container

<div class="container">

  <div class="user" data-sortable="5210">
    <div class="text"> Jerry Smith </div>
    <div class="submenu"> ... </div>
  </div>
  <div class="user" data-sortable="5720">
    <div class="text"> Jerry Smith </div>
    <div class="submenu"> ... </div>
  </div>
  <div class="user" data-sortable="5914">
    <div class="text"> Jerry Smith </div>
    <div class="submenu"> ... </div>
  </div>

</div>

Then we get some new data via ajax thats in an object (e). We know that we have say three new users with a sortable value of 5341 and 6710. So we want to insert the html (also in e) of 5341 after the second .user div we already have and the second on of 6710 after the last div we currently already have.

Can you provide a working example? It's impossible to understand your structure and what you are trying to get (and the problem exactly...) — Dekel, Nov 03 '16 at 13:06
This is only html structure, it's not a working example (html/css/js - something that also view the actual result of the code you tried). — Dekel, Nov 03 '16 at 13:14
@Dekel Well I don't know where to start as all I can think of is append or prepend to the container or to insert after the new elelements sortable value -1 but that won't work if there are huge gaps between the sortable value of each element. — Walrus, Nov 03 '16 at 13:24
I'm still trying to understand if you are looking for a hint to solve the problem/pseudo-code/someone that will write the code for you... — Dekel, Nov 03 '16 at 13:25
@Dekel looking to know how I can select the nearest element data-sortable value to a new one I have. Something like using greater than or equal to in a selector. $(".user[data-sortable>=e.sortable]"). Is it possible to select like that. — Walrus, Nov 03 '16 at 13:27
You can use a filter to select by numeric value: http://stackoverflow.com/questions/2613648/jquery-selecting-all-elements-where-attribute-is-greater-than-a-value — Dekel, Nov 03 '16 at 13:37

four · Answer 1 · 2016-11-04T05:44:17.670

Let's say your json data looks like this:

var jsonResponse = [{
        name : 'Jerry Smith',
        sortID   : '5341'
    },
    {
        name : 'Jerry Smith',
        sortID   : '6710 '
    }
];

Script:

$.each(jsonResponse, function(objNdx, obj) {
    var prevNdx = 0;
    $('.user').each(function(ndx, elem) {
        if (obj.sortID >= $(elem).data('sortable')) {
            prevNdx = ndx;
        }
    });

    var $newData = $('<div>', {
        'class': 'user',
        'data-sortable': obj.sortID
    }).append(
        $('<div>', {
            'class': 'text',
            'text': obj.name
        })
    ).append(
        $('<div>', {
            'class': 'submenu',
            'text': '...'
        })
    );

    $('.container').children('div.user').eq(prevNdx).after($newData);
});

The idea is to check if the json data sortable ID if its greater than or equal to the looped sortable id... if so then store that looped sortable id's index to a variable in this case prevNdx.

Then use the prevNdx to append that json data right after that div.user of position prevNdx.

Check this fiddle: here

jQuery insert elements after nearest number in found set

1 Answers1