I have a series of lists, when a list item is clicked the list is split in two and a paragraph element is inserted in between. This paragraph element is assigned a class based on the index of the list item that was clicked.
I now am trying to remove that paragraph element if the paragraph already exists contains a class the same as clicked item’s index.
As far as I know the .is() method is needed to get this working but I’m have trouble trying to get my head around using it to select the paragraph element. It’s pretty cumbersome but this is main bit of code I’m having trouble with:
if ($(this).is($(this).parent().parent().children('.'+index))) {
alert('li already clicked');
}
Any help is appreciated.
JS:
$(".category_list.grid li").click(function () {
var $uls = $(this).parent().parent().children("ul");
var $lis = $uls.find("li");
// add second list
if ($uls.length < 2) {
var $newUl = $("<ul></ul>").insertAfter($uls);
$uls = $uls.add($newUl);
}
var index = $lis.index(this);
alert(index);
//calculate how many lis fit per line
var noPerLine = Math.floor($(".category_list.grid").width()/$(".category_list.grid li").outerWidth(true));
//find index at end of line to cut
var cutIndex = (Math.ceil((index+1)/noPerLine)*noPerLine)-1;
// if last row make index last item
if (cutIndex > ($lis.length-1)) {
cutIndex = $lis.length-1;
}
alert(cutIndex);
var $following = $lis.slice(cutIndex + 1); // get all following `li` elements
// append all li elements up to the current one to the
// first list
$uls.eq(0).append($lis.slice(0, cutIndex + 1));
if ($following.length > 0) {
// append to second list
$uls.eq(1).append($following);
} else {
// remove second list if empty
$uls.eq(1).remove();
$uls = $uls.eq(0);
}
// add a paragraph after the first list
$('.preview').remove();
// find if index already clicked
if ($(this).is($(this).parent().parent().children('.'+index))) {
alert('li alread clicked');
}
$('<p />', {'class': 'preview ' + index,text: 'Test'}).insertAfter($uls.eq(0));
});
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<div class="category_list grid">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="category_list grid">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="category_list grid">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS:
*{padding:0;margin:0}
.preview {clear:both; min-height: 10em; background: red;}
ul {clear:both;}
li {
width: 5em;
height: 3em;
background: black;
display: inline-block;
text-align: left;
margin: 1em;
color: white;
}
.category_list {margin-bottom:2em; clear:both;}