0

リストアイテムをクリックすると、リストが2つに分割され、その間に段落要素が挿入されます。この段落要素には、クリックされたリスト項目のインデックスに基づいてクラスが割り当てられます。

リスト項目が以前にクリックされた場合、または段落にクリックされた項目のインデックスと同じクラスが含まれている場合、その段落要素を削除しようとしています。

これを機能させるために必要な .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')div 内から既存の .'preview' のみを選択するのではなく、ある種の '.previews' の配列を作成しているようです。

これはうまくいきます：

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

動作し、段落要素を削除する前に if ステートメントを実行する必要があります。 http://jsfiddle.net/K4b8J/19/

于 2013-02-23T08:15:35.133 に答える