我有一个带有一堆歌曲的 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>");
}
});
};