Question

Such as the div container:

<div class="container">
  <ul>
    <li id="apple"> apple </li>
    <li id="banana"> banana </li>
    ....
  </ul>
</div>

And I am going to append new more li elements inside the container,so I need a way to check if that li’s id which will append had been used or not?

[update]

In my case I would have several containers , So, the li elements which will have the same id possibly inside one or more of them in the same time.

Thank you very much!?

Answer 1

You can only have one unique id per page. So you should never have two or more list items with the same id even if they might be in different containers. You would want to change class=”container” to id=”container” and append the li to just that one div. OR you need to change your list item id=’orange’ to class=’orange’ then you could add that list item to every div with a class of container. I assume the second choice is what you want to do.

newlistItem = "<li class="orange"> orange </li>"; //build the new list Item

var newId = $('newlistItem').attr('class'); // load the class of the li you want to append

var findId = "." + newId; //build the selector you want to find

foundListItem = $('.container').find(findId);

 if (foundListItem.length == 0) {  // if not found we can now add it

  // this will add li to every div with class container (use an id for just one div)
  $('newlistItem').appendTo('.container'); 

  }