0

我有一系列列表,当单击列表项时,列表被分成两部分,中间插入一个段落元素。这个段落元素根据被点击的列表项的索引分配了一个类。

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

我似乎无法理解实现此功能所需的 .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');
 }
4

1 回答 1

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

Works & if 语句应该在删除段落元素之前执行。 http://jsfiddle.net/K4b8J/19/

于 2013-02-23T08:15:35.133 回答