Chcę dać rosnący identyfikator nowych elementów Li, które są automatycznie tworzone przez listę OL

<div id="txtarea" contenteditable="true">Some text</div>
var html2 = "<div class='steps'><ol><li class='personid' id=''><a href='url-here'>Link Text </a></li></ol><div>";
$("#txtarea").html(html2);

Uwaga: Elementy LI muszą być automatycznie utworzone przez listę OL, a nie ręcznie (przez Lub podczas pętli)

Oto js fiddle.please po pierwsze utworzyć nowy element Li w elemencie JSFiddle.New zostanie automatycznie utworzony z powodu Ol.then Uyou zobaczysz. Identyfikator obu Li będzie taki sam

http://jsfiddle.net/younis764/RWCKU/4/

Chcę uzyskać zwiększenie identyfikatora do każdego nowego elementu LI, automatycznie utworzonego przez OL List.plz Pomoc

0
user1452376 28 listopad 2013, 09:30

4 odpowiedzi

Najlepsza odpowiedź

Z rozważaniem do contenteditable: http://jsfiddle.net/rwcku/10/ ( Zaktualizowano z rev 9)

Ten sam pomysł jak poniżej, z wyjątkiem tego, że odbywa się na istniejącym elemencie w obsłudze {x0}}.

document.addEventListener("DOMNodeInserted", function(event){
  var element = event.target;
  if (element.tagName == 'LI') {
    var $el = $(element);
    var maxId = 0;
    $el.siblings().each( function() {
        var id = $(this).attr('id');
        if ( id > maxId ) {
            maxId = id;
        }
    });
    $el.attr('id',++maxId);
  }
});

Oto zaktualizowany skrzypce: http://jsfiddle.net/rwcku/8/

Pomysł polega na zdobyciu ostatniego identyfikatora Li, analiza jako int i przyrost. Użyj również poprzedniego li jako szablonu i po prostu zastąp jego zawartość (.clone(true)) - jego klasie, wydarzenia, dane itp. Następnie umieść nową zawartość (zastępując pierwotnie klonowane).

Wreszcie, owinąć go w wywołanie funkcji, gdzie przekazujesz HTML, który chcesz wstawić. Można to wywołać ręcznie, w ramach obsługi imprezy lub w pętli jakichś ... okrzyki!

Oto wołowina:

function addLi(newHtml) {
    var $lastLi = $('#txtarea ol li').last();
    var lastId = $lastLi.attr('id')||0;
    var $clone = $lastLi.clone(true);
    $clone.attr('id',++lastId).html(newHtml);
    $lastLi.after($clone);
}

I użycie:

addLi('<a href="#">Link text 2</a>');
addLi('<a href="#">Link text 3</a>');

Zakłada się, że przynajmniej jeden Li istnieje, a atrybut ID jest numeryczny (nie mieszany, chociaż może to być wyposażone w retro z nieco .attr('id') parsowanie wartości).

2
zamnuts 28 listopad 2013, 06:46
var i=0;// set your value 

var html2 = "<div class='steps ' ><ol ><li class='personid'  id='"+(++i)+"' ><a href='url-here' >Link Text </a></li></ol><div>";

$("#txtarea").html(html2);

Demo

0
Rituraj ratan 28 listopad 2013, 05:33

Właśnie zmodyfikowałem swój bit kodu, mam nadzieję, że może ci pomóc sprawdzić

var html2 = "<div class='steps ' ><ol ><li class='personid'  id='' ><a href='url-here' >Link Text </a></li></ol><div>";
$("#txtarea").html(html2);
var html2 = "<div class='steps ' ><ol ></ol><div>";
for(i=1;i<10;i++)
{
    var newli="<li id='"+i+"' >link text"+i+"</li>";
    $("#txtarea .steps ol").append(newli);
}
0
user2010576 28 listopad 2013, 06:17

Nieco zmodyfikowałem swój kod Clarity (http://jsfiddle.net/wared/fsqz2/) :

var uid = function (uid) {
    return function () {
        return 'item-' + (++uid);
    };
}(0);

document.addEventListener('DOMNodeInserted', function(event){
    var el = event.target;
    if ((el.tagName + '').toLowerCase() === 'li') {
        el.setAttribute('id', uid());
    }
});

$('#txtarea').html(
    '<ol><li id="' + uid() + '">Some text</li></ol>'
);

uid() Zwraca identyfikator z liczbą zwiększeniem każdego połączenia:

uid(); // "item-1"
uid(); // "item-2"
0
leaf 28 listopad 2013, 17:29