jquery add new li to nested set model

Question

What is the best way to insert a new li element into a specific position of a nested set model?

For example, the following list:

<ol class="nested">
    <li id="list_1"></li>
    <li id="list_2">
        <ol>
            <li id="list_3"></li>
            <li id="list_4"></li>
        </ol>
    </li>
    <li id="list_5"></li>
</ol>

Let's say I want to insert a new li as a child of #list_2 I can do like that:

$('#list_'+parent_ID+' ol > li:last-child').after('<li id=""></li>');

But wouldn't work if parent was going to be #list_1 or #list_4 Any ideas !?

@artlung that's what i'm looking for, yes =) – eduardev Oct 03 '11 at 21:48 — eduardev, Oct 03 '11 at 21:48

Wolfram · Answer 1 · 2011-10-03T22:04:24.183

If I understood correctly, this example on jsfiddle might be what you are looking for?! If there already is an <ol> inside the parent element, the <li> is appended. If the parent <li> is empty, a new <ol> is created before the new child is appended to it.

function appendItemToList(parentId) {
    var $thelist = $("#list_"+parentId),
        $ol = $thelist.find("> ol");

    if(!$ol.length) {
        $ol = $("<ol />").appendTo($thelist);
    }
    $ol.append("<li id=''></li>");
}

ipr101 · Answer 2 · 2011-10-03T22:08:54.233

1

Using iff plugin -

var parent_ID = 1;
$('#list_' + parent_ID).
    iff($(this).children('ol').length > 0)
    .append("<li>new</li>").end()
    .iff($(this).children('ol').length == 0)
    .append("<ol><li>new</li></ol>");

Demo - http://jsfiddle.net/MUcbW/2/

edited Oct 03 '11 at 22:08

answered Oct 03 '11 at 21:57

ipr101

24,096
8
59
61

Nice chainable if statement, did not know... Also good answer, had to accept the first one though. Thank you ipr101 – eduardev Oct 03 '11 at 22:02

score 1 · Answer 3 · answered Oct 03 '11 at 21:59

1

Here's an example, adding the appropriate elements on click:

$('ol.nested > li').bind('click', function(){
    var elem;
    if ($('ol', this).length > 0) {
        elem = $(this).find('ol');
    } else {
        elem = $('<ol>').appendTo($(this));
    }
    elem.append("<li>new</li>");
});

answered Oct 03 '11 at 21:59

artlung

33,305
16
69
121

Thanks... Ivan had came up with the same idea :) – eduardev Oct 03 '11 at 22:03

score 0 · Accepted Answer · answered Oct 03 '11 at 21:47

0

There are many ways. One may be this:

if ($('#list_'+parent_ID+' ol').length > 0) {
  $('#list_'+parent_ID+' ol > li:last-child').after('<li id=""></li>');
} else {
  $('#list_'+parent_ID).append('<ol><li id=""></li></ol>');
}

You can test here.

answered Oct 03 '11 at 21:47

Ivan

14,692
17
59
96

score 0 · Answer 5 · answered Oct 03 '11 at 21:54

0

You could do this in one line like:

$('#list_' + parentId).contents().andSelf().filter('li').last().after('<li id=""></li>');

jsFiddle - http://jsfiddle.net/FloydPink/TSBKY/

answered Oct 03 '11 at 21:54

Hari Pachuveetil

10,294
3
45
68

jquery add new li to nested set model

5 Answers5