Question

I’m adding tags to a label on click by doing the following in jQuery

$('.addTag').live('click', function () {

    $('.pendingTags').html($('.pendingTags').html() + $('.newTag').val() + ', ');

});

But what I need to do is see if the $('.newTag').val() already exists in the text/html of .pendingTags

Any idea how I can accomplish this?

Thanks

Answer 1

Use the .text() method, rather than the .html() method. Also, you should add the comma before the new tag.

$('.addTag').live('click', function () {
    var currentTags = $('.pendingTags').text();  // Get current labels
    var newTag = $('.newTag').val();             // Get new label
    var listOfTags = currentTags.split(',');     // Create list of labels
    for(var i=0, l=listOfTags.length; i<l; i++) {// Loop through each
        if(listOfTags[i] == newTag) return;      // If the label exists, return
    }
    var sep = /^\s+$/.test(currentTags) ? "" : ","; // Create separator
    $('.pendingTags').text(currentTags + sep + newTag); //Not returned, add label
});