jquery - Adding count up timers to dynamically added JQuery Sortable list items with Javascript (or JQuery)

Question

I am trying to create a Javascript function which will append a multiline entry, including a count up timer, (each on a separate line) into a Jquery Sortable list. I aim to have it trigger on clicking an image to add the multi-line item to the list in Sortable1. I hope to have it looking something like this and the 3 line block can then be dragged from Sortable list to Sortable list (e.g. as one list item).

Mr Joe Bloggs
33 Years of Age
00.15

(where 00.15 is the count up timer).

I can create a multi-line list entry but can’t get the count up timer in it.The moment I try to put the timer in, the function no longer works. The function as it is at the moment (where the multi-line list item is pushed into Sortable1) is:

function AddListItem() {
         
    var Name = "Mr Joe Bloggs"
    var Age = "33 Years of Age"
    
    var sec = 0;
    function pad ( val ) { return val > 9 ? val : "0" + val; }
    setInterval( function(){
        document.getElementById("seconds").innerHTML=pad(++sec%60);
        document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
    }, 1000);

    
    var ul = document.getElementById("sortable1");   
  var li = document.createElement("li"); 
   li.classList.add("ui-state-default");
  li.appendChild(document.createTextNode(Name));
li.appendChild(document.createElement("br"));
    li.appendChild(document.createTextNode(Age));
li.appendChild(document.createElement("br"));
    li.appendChild(document.createElement(id="minutes"));
    li.appendChild(document.createTextNode(":"));
    li.appendChild(document.createElement(id="seconds"));   
  ul.appendChild(li);
}

I believed the timer scripting would need to be in the same function as that which creates the other lines so that the data is available at the same time to add all the list components together into the list item (name , age and timer) .

I have tried to use : li.appendChild(document.createTextNode("minutes")); li.appendChild(document.createTextNode("seconds"));

at the end of the appendChild section and I have tried: li.appendChild(document.createTextNode(id="minutes")); li.appendChild(document.createTextNode(id="seconds")); and that doesn't work either as there is no such option.

I have tried creating a variable that references the Text Node to see if I can get the "Id's" ( e.g “seconds” and “minutes”) in that way but no luck.

I have also tried :

li.appendChild(document.createTextNode("minutes")); li.setAttribute = ("id", "minutes"); li.appendChild(document.createTextNode("seconds")); li.setAttribute = ("id", "seconds");

but this replaces the other list items (Name and Age) with the timer as it doesn’t seem to constrain to just the “minutes” or “seconds” TextNode addition.

I can’t seem to see a way to put the Id’s (“seconds” and “minutes”) into the list item (as Ids) so the innerHTMLs can inject into them. Can I ask if this way of putting a timer could be made to work some way or is there another way of putting a (count up) timer as the last line in the list item to be added to the Sortable list en-bloc?

In passing I imagine I will need to manipulate things further if I wanted to click on the image more than once as I would be trying to inject the same timer into multiple list items which would cause issues of its own. For now I am trying to get the timer in successfully.

Any help appreciated.

标签： jquerylisttimerjquery-ui-sortable

Answer 1

我一直在努力寻找解决方案，以防万一有人感兴趣。

我没有添加大量的 li.append.Child'd，而是使用了 jQuery，如下所示：

$(document).ready(function(){
$("#sortable1").append('<li class="ui-state-default">' + Name +  '<br>' + 
Age + '<br>' + '<span id="minutes">' + '' + '</span>' + ':' + '<span 
id="seconds">' + '' + '</span>' + '</li>');

现在的问题（正如预测的那样）是解决如何确保为每个列表项添加的计时器是独立的并且不会相互冲突。

干杯