我有一系列列表,当单击列表项时,列表被分成两部分,中间插入一个段落元素。这个段落元素根据被点击的列表项的索引分配了一个类。
如果先前单击了列表项,或者该段落包含与单击项的索引相同的类,我现在正在尝试删除该段落元素。
我似乎无法理解实现此功能所需的 .is() 方法。我的选择器非常麻烦,但这是我的 .is() 方法:
if ($(this).is($(this).parent().parent().children('.'+index))) {
alert('li alread clicked');
}
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;}
这样的事情更有意义,但我仍然无法让它工作。
if ($(this).parent().siblings('.preview').is('.'+index)) {
alert('li already clicked');
}
似乎$(this).parent().siblings('.preview')
制作了某种“.previews”数组,而不是从 div 中选择唯一现有的 .'preview'。
好的,这有效:
if ($(this).parent().next('.preview').is('.'+index)) {
alert('li already clicked');
}