nth-child(odd/even) not working properly when loading more elements

Question

I have a dynamically generated list of divs and have the odd ones aligned to the left and the even ones to the right. When I get to the bottom of the page, I use Ajax to load more divs. For some reason, when the new divs are loaded, they aren't always aligned to the left as I had expected. I have tried setting the maximum number of divs per batch to be both odd and even and still I cannot get the to fall left and then right every time. Can anyone assist?

enter image description here

 .cd - timeline - content {
     margin - left: 0;
     padding: 1.6e m;
     width: 45 % ;
 }

 .cd - timeline - content::before {
     top: 24 px;
     left: 100 % ;
     border - color: transparent;
     border - left - color: white;
 }

 .cd - timeline - content.cd - read - more {
     float: left;
 }

 .cd - timeline - content.cd - date {
     position: absolute;
     width: 100 % ;
     left: 122 % ;
     top: 6 px;
     /*font-size: 16px;
     font-size: 1rem;*/
 }

 .cd - timeline - block: nth - child(even).cd - timeline - content {
     float: right;
 }

 .cd - timeline - block: nth - child(even).cd - timeline - content::before {
     top: 24 px;
     left: auto;
     right: 100 % ;
     border - color: transparent;
     border - right - color: white;
 }

 .cd - timeline - block: nth - child(even).cd - timeline - content.cd - read - more {
     float: right;
 }

 .cd - timeline - block: nth - child(even).cd - timeline - content.cd - date {
     left: auto;
     right: 122 % ;
     text - align: right;

 }

The below shows the HTML structure for 4 items being displayed, 2 loaded initially and then the second 2 loaded after selecting the "load more" button.

 <div class="cd-timeline-block activity new_file activity-item date-recorded-1428500701" id="activity-205">
    <div class="cd-timeline-img cd-file">
        <span class="dashicons dashicons-media-text"></span>
    </div>
    <div class="cd-timeline-content">
        <span class="cd-date">8 April, 2015</span>
    </div>
</div>

<div class="cd-timeline-block activity new_file activity-item date-recorded-1428500701" id="activity-204">
    <div class="cd-timeline-img cd-file">
        <span class="dashicons dashicons-media-text"></span>
    </div>
    <div class="cd-timeline-content">
        <span class="cd-date">8 April, 2015</span>
    </div>
</div>

<div class="cd-timeline-block activity new_file activity-item date-recorded-1428500701" id="activity-203">
    <div class="cd-timeline-img cd-file">
        <span class="dashicons dashicons-media-text"></span>
    </div>
    <div class="cd-timeline-content">
        <span class="cd-date">8 April, 2015</span>
    </div>
</div>

<div class="cd-timeline-block activity new_file activity-item date-recorded-1428500701" id="activity-202">
    <div class="cd-timeline-img cd-file">
        <span class="dashicons dashicons-media-text"></span>
    </div>
    <div class="cd-timeline-content">
        <span class="cd-date">8 April, 2015</span>
    </div>
</div>

<li class="load-more"><a href="/admin-ajax.php?acpage=3">Load More</a></li>

I'm guessing all those spaces around the dashes in your CSS are not there in the actual code, must have been some copypaste problem? — Victor, Apr 10 '15 at 09:27
That's odd; the spaces weren't there originally, they were added by the edit. — Mr Lister, Apr 10 '15 at 09:51
If by default you show more div without use ajax, it s work ? — Benjamin Poignant, Apr 10 '15 at 10:01
Please see ["Should questions include “tags” in their titles?"](http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), where the consensus is "no, they should not"! — , Apr 10 '15 at 10:32
Can you make a fiddle so we can at least play with the code and try to help — StudioTime, Apr 10 '15 at 10:34
I think you might experiencing this problem? http://stackoverflow.com/questions/17458582/nth-childeven-odd-selector-with-class — nilsi, Apr 10 '15 at 14:15

score 0 · Answer 1 · answered Apr 10 '15 at 10:50

I might be wrong but css is loaded before your ajax call which changes the amount of rows, so css can work in weird way. If i were you i would create class for odd and for even with only float property and add this class to element while loading from ajax, ofcourse you would have to get the number of rows visible and then increment this value by 1, if modulo of this number is 0 then you have even else you have odd.

score 0 · Answer 2 · answered Jul 18 '19 at 11:45

Seems like you are using the timeline from codyhouse.

Without delving deeper my guess is that your nth-child approach won't work because it matches all of the elements not the class and I am guessing that your collection has some items that you aren't showing. If not, then this is not correct.

You need to dynamically create a class instead and use their row-reverse on that class

$(".cd-timeline-block").filter(function(index, element) {
        return index % 2 == 1;
    }).addClass("odd");

nth-child(odd/even) not working properly when loading more elements

2 Answers2