不向播放列表添加重复项

Question

我有一个 ul 有一堆歌曲，可以添加到另一个 ul 以形成播放列表。 但是我不希望同一首歌曲添加两次我通过 jquery 执行此操作但无法获得我想要的结果这里是http://jsfiddle.net/mcaJS/，这是我的代码：

HTML

<h1>Playlist Mania</h1>

<form>
    <input type="text" id="containsContent">
    <input type="button" value="Filter" id="filterButton">
    <input type="button" value="Add to Playlist" id="addButton">
    <input type="button" value="Clear" id="clearButton">

<h2>Selected Songs</h2>

    <ul id="playlist"></ul>

<h2>Albums to choose from</h2>

    <div class="album">
         <h3>The Dark Side of the Moon</h3>

         <h4>Pink Floyd</h4>

        <ol>
            <li>
                <input type="checkbox"><a href="http://en.wikipedia.org/wiki/Speak_to_Me" data- length="1:30">Speak to Me</a>
            </li>
            <li>
                <input type="checkbox"><a href="http://en.wikipedia.org/wiki/Breathe_(Pink_Floyd_song)" data- length="2:43">Breathe</a>
            </li>
            <li>
                <input type="checkbox"><a data-length="3:36">On the Run</a>
            </li>
            <li>
                <input type="checkbox"><a data-length="7:01">Time</a>
            </li>
            <li>
                <input type="checkbox"><a href="http://en.wikipedia.org/wiki/The_Great_Gig_in_the_Sky" data-length="4:36">The Great Gig in the Sky</a>
            </li>
            <li>
                <input type="checkbox"><a data-length="6:22">Money</a>
            </li>
            <li>
                <input type="checkbox"><a data-length="7:46">Us and Them</a>
            </li>
            <li>
                <input type="checkbox"><a data-length="3:25">Any Colour You Like</a>
            </li>
            <li>
                <input type="checkbox"><a href="http://en.wikipedia.org/wiki/Brain_Damage_(song)" data-length="3:48">Brain Damage</a>
            </li>
            <li>
                <input type="checkbox"><a data-length="2:03">Eclipse</a>
            </li>
            <ol>
    </div>
</form>
</body>

</html>

JS

$("document").ready(function () {
    $("input#filterButton").click(filterContentAndCheck);
    $("input#clearButton").click(clearAll);
    $("input#addButton").click(addToPlaylist);
});
var clearAll = function () {
    $("*").removeClass("highlight");
    $("form").get(0).reset();
    $("form input:checked").attr("checked", false);
};
var filterContentAndCheck = function () {
    var lookFor = $("input#containsContent").val();
    clearAll();
    $("li a:contains('" + lookFor + "')").parent().addClass("highlight");
    $("li.highlight input:checkbox").attr("checked", true);
};

var addToPlaylist = function () {
    $("form input:checked").parent().each(function () {
        var song = $(this).text();
        var contains = $("ul#playlist li:contains()");
        console.log(contains);
        if (contains > 0) {
            alert("do not add");
        } else {
            $("ul#playlist").append("<li>" + song + "</li>");
        }
    });
};

Answer 1

var contains = $("ul#playlist li:contains()");

应该是

var contains = $("ul#playlist li:contains(" + song  + ")");

否则，您可以拥有一个数组并在添加到播放列表时推送歌曲。并在将其添加到播放列表之前先检查数组。

你的条件应该检查​​contains的长度

 if (contains> 0) {

应该是

 if (contains.length > 0) {

Check Fiddle