Question

我有一系列列表，当单击列表项时，列表被拆分为两个，并在其间插入段落元素。根据单击的列表项的索引为此段落元素分配一个类。

我现在正在尝试删除该段落元素，如果先前已单击列表项，或者该段落包含的类与单击项目的索引相同。

我似乎无法理解为使其正常工作所需的.is（）方法。我的选择器非常麻烦，但这是我的.is（）方法：

if ($(this).is($(this).parent().parent().children('.'+index))) {
    alert('li alread clicked');
}

http://jsfiddle.net/K4b8J/15/

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');
 }

Answer 1

if ($(this).parent().next('.preview').is('.'+index)) {
        alert('li already clicked');
}

作品＆amp;在删除段落元素之前，if语句应该去。 http://jsfiddle.net/K4b8J/19/

已点击的jQuery .is（）

1 个答案: