SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: jQuery .is()

  1. #1
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery .is()

    I have a series of lists, when a list item is clicked the list is split in two and a paragraph element is inserted in between. This paragraph element is assigned a class based on the index of the list item that was clicked.

    I now am trying to remove that paragraph element if the paragraph already exists contains a class the same as clicked item's index.

    As far as I know the .is() method is needed to get this working but I'm have trouble trying to get my head around using it to select the paragraph element. It's pretty cumbersome but this is main bit of code I'm having trouble with:

    Code JavaScript:
    if ($(this).is($(this).parent().parent().children('.'+index))) {
        alert('li already clicked');
    }

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

    Any help is appreciated.

    JS:
    Code JavaScript:
    $(".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:
    Code HTML4Strict:
    <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:
    Code 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;}

  2. #2
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok figured it out and I stupidly put my if statement in the wrong spot.

    Code:
    if ($(this).parent().next('.preview').is('.'+index)) {
            alert('li already clicked');
        }
    complete code: http://jsfiddle.net/K4b8J/19/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •