jQuery .each works correctly only once for first item

Question

I am trying to center a set of absolute elements in a parent. I am using .each to iterate through the following HTML:

<div id="slider_wraped" style="display:none;">
    <ul class="slider text-center">
        <li>
            <div class="slider_info ">
                <h2>2015 AGSC</h2>
                <p>AFRICAN GEOSIENCES STUDENT CONFERENCE</p>
            </div>  
        </li>
        <li>
            <div class="slider_info ">
                <h1><i class="fa fa-flag"></i></h1>
                <h2>5</h2>
                <p>COUNTRIES</p>
            </div>
        </li>
    </ul>
</div>

Here is the jQuery code:

$('ul.slider li').each(function(e)
     {
        child = $(this).children('div.slider_info');
        child_height = child.height()/2;
        child_width = child.width()/2;

        parent = child.parent().parent().parent();
        parent_height = parent.height()/2;
        parent_width = parent.width()/2;

        left = parent_width - child_width;


        child.css({'top':(parent_height-child_height-50)+'px','left':left+'px'});
     });

The problem is, the first element is well positioned at the centre but the rest of the items in the list are placed in a very bad position. I have tried switching them around, like making the third item to be the first and it does the same thing. I have attached two images to show how well positioned the first element is and how bad the rest of the elements are.

If it is of any help, the html is part of a bxSlider and I have used Bootstrap for my responsive layouts.

Well centered element Badly centered element

Oh, and the background image is my campus library (JKUAT - Nairobi,Kenya). just in case you were wondering :)

You could try and use Bootstraps Carousel? as you already use Bootstrap... Would that work for you? — furier

Canser Yanbakan Canser Yanbakan · Accepted Answer · 2014-06-06T09:15:55

Give your div.slider_info element this css atributes:

div.slider_info{
    position:absolute;
    left:50%;
    top:50%;
    /* and the rest */
}

And don't forget to check your li element on the slider has relative positioning.

Change your javasript to this:

$('ul.bxslider li').each(function(e) {
    var $child = $(this).children('div.info');
    $child.css({'marginTop':'-'+ ($child.height() / 2) +'px','marginLeft':'-'+ ($child.width() / 2)+'px'});
});

Test: (may have css styling problems) http://jsfiddle.net/4KYj9/

jQuery .each works correctly only once for first item

1 Answers