Question

I had this problem:

I was trying to do the Twitter Effect, so when you click on it,
checks if it’s either :first or :last, and if it isn’t, create a
margin-top and margin-bottom just like in Twitter’s Timeline. I
want to create this effect when clicking in any of “One phrase here”.

The main problem was that my jQuery code doesn’t detect :first and
:last. I already tried also with :first-child and it did the same.

Using this HTML code:

<div class="phrases-container">
    <div class="phrases-title">Titulo</div>
    <div class="phrases-list">
        <div class="phrases-item zooming">First child</div>
        <div class="phrases-item zooming">One phrase</div>
        <div class="phrases-item zooming">One phrase</div>
        <div class="phrases-item zooming">Last child</div>
    </div>
    <div class="phrases-load-more">
        <a class="link loadMore">Get more phrases!</a>
    </div>
</div>

Using this jQuery code, I could fix it. Thanks for your help! (:

$(".zooming").live('click', function(){
    var $z = $('.zooming');
    index = $z.index(this);
    var bradiust = $(this).css("borderTopLeftRadius");
    if (bradiust == '0px') 
        var thand = "show";
    else 
        var thand = "hide";
    if (thand == "show"){
        if (index == 0 ){
            alert("This is the first");
        }else
        if (index == ($z.length-1)){
            alert("This is the last");
        }else{
            alert("This is just another");
        }
    }else{
        if (index == 0 ){
            alert("This is the first");
        }else
        if (index == ($z.length-1)){
            alert("This is the last");
        }else{
            alert("This is just another");

        }
    }

});

Answer 1

I’m not quite sure what is wrong with :first, but how about this:

var $z = $('.zooming'),
    index = $z.index(this);

if (index == 0 || index == ($z.length-1)) {
    return false;
}