jQuery .is（）已被點擊

我有一系列的列表，當列表項被點擊時，列表被分成兩部分，並在其間插入一個段落元素。該段落元素根據被點擊的列表項目的索引被分配一個類別。jQuery .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'); 
}

來源

2013-02-23 Ryan King

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

作品&的的，如果你刪除段落元素之前的說法應該去。 http://jsfiddle.net/K4b8J/19/

來源

2013-02-23 08:15:35

jQuery .is（）已被點擊

回答

相關問題