check if dynamic li element already has been written out to prevent duplicates

I have a function to check all the checkboxes on the page and add each checkbox item to a ol dynamically. When i click the button to collect all the visible checkboxes on the page i want to make sure that it is not already in the ol list. Trying to prevent them from showing up twice.

Here is the jquery code that i have now which adds them fine to the ol:

$('.checka开发者_StackOverflow中文版ll').click(function () {
 var checkboxes = $(":checkbox");

 $.each(checkboxes, function() {
  if ($(this).hasClass("visibleCounter")){
   $(this).attr('checked', true);
   var productName = $(this).attr("title");
   var productClassName = $(this).attr("name");
   $("#selectedProductsList").append("<li class=\"productList " + productClassName + "\"><p class=\"removeIcon\"><img src=\"images/remove-icon.png\" alt=\"Remove Product\" /></p><span class=\"productName\">"+ productName +"</span></li>");
  };
 });
});

.checkall is the button's class to activate the actions. #selectedProductsList is the ol container that i write the new li's to.

Just want to check if the li is already in the ol before writing it to the list.

Any ideas how to do this?

You can manage all of this by querying the li's by class and only dealing with checkboxes that are not checked when you "check all"

function Check(o) {
    var productClassName = $(o).attr("name");
    if ($(o).is(":checked")) {
        var productName = $(o).attr("title");
        $("#selectedProductsList").append("<li class=\"productList " + productClassName + "\"><p class=\"removeIcon\"><img src=\"images/remove-icon.png\" alt=\"Remove Product\" /></p><span class=\"productName\">" + productName + "</span></li>");
    }
    else {
        $("#selectedProductsList ." + productClassName).remove();
    }
}

$('.checkall').click(function() {
    $("input:checkbox:not(:checked)").each(function() {
        $(this).attr("checked", true);
        Check(this);
    });
});

$("input:checkbox").click(function() {
    Check(this);
});

Here's a working example:

http://jsfiddle.net/SWP6P/1/

Keep track of the elements you are generating with a hidden textbox. Then you can just check to see if the value for that element is in the textbox. If so, then don't allow the script to add it to the element collection. Just keep a comma delimited list of "productClassName" in the textbox.

Or:

You could give each element generated an Id constructed from the productClassName. Then you can just query $('#' + productClassName).length and see if there are any items in the collection with that Id.

If you have access to a unique identifier for each item, you could use that as a class name for the <li>, then before adding the new <li>, check whether that class already exists within the <ol>

You can use jQuery.data method on checkboxes to mark that they are already in the list.

$(this).data('in_list', true);

and append only if data is not present

if (!$(this).data('in_list')) {
    $("#selectedProductsList").append(...)
}

Here's a fiddle to see it in action

UPDATE

OR, even better, store reference to a li you created in the .data(), this will allow you to remove that element once the checkbox is unchecked. Here's an updated fiddle