Pregunta

I have a ul with a bunch of songs that can be added to another ul to form a playlist. however i do not want the same song added twice I'm doing this through jquery but cannot get the result i want here is the http://jsfiddle.net/mcaJS/ and here is my code:

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>");
        }
    });
};
¿Fue útil?

Solución

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

supposed to be

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

Otherwise you can have a array and push the songs when added to the playlist. And check the array first before adding it to the playlist.

And your condition should check for the Length of contains

 if (contains> 0) {

supposed to be

 if (contains.length > 0) {

Check Fiddle

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top