how to affect foreach items style every item alone

Question

i used "foreach" statement to access all items of IEnumerable and present it in details page ....and i want to make float property of each item different from the other items ....so i used jQuery to affects on each item....but when i run the code all items became with the same direction.....how to affects on each item alone and make its direction of first to right and second to left and third to right ...etc?

here is html code:

@foreach (var item in Model.TimeLines)
{
    <section id="timeline">
        <article>
            <div class="inner">
                <span class="date">
                    <span class="day">@item.EventDate</span>
                </span>
                <h2>@item.Title</h2>
                <p>@item.Body</p>
                <div class="form-group row col-lg-12">
                    @*<div class="button_cont row col-lg-6" align="center"><a asp-action="Edit" asp-controller="TimeLines" asp-route-id="@item.Id" class="example_c" noopener">Edit</a></div>*@
                    <div class="button_cont row col-lg-6" align="center"><a asp-controller="TimeLines" asp-action="Delete" asp-route-id="@item.Id" style="cursor:pointer;" class="example_c" id="del">حذف</a></div>
                    <div class="button_cont row col-lg-6" align="center"><a asp-controller="TimeLines" asp-action="Edit" asp-route-id="@item.Id" style="cursor:pointer;" class="example_c">تعديل</a></div>
                </div>
            </div>
        </article>
    </section>
}

and jQuery code:

<script>
        $('section article').each(function (i, element) {
            $(element).find('div.inner').css('float', 'right');
            element = element.nextElementSibling.nextElementSibling;
            $(element).find('div.inner').css('float', 'left');

        });
    </script>

You could loop with an index, and conditionally add the style/class with `index % 2 == 0`. [See this](https://stackoverflow.com/a/22373172/3717691). Otherwise you can perhaps do it with [CSS entirely](https://stackoverflow.com/questions/5080699/using-css-even-and-odd-pseudo-classes-with-list-items). — Jeppe, Feb 18 '19 at 15:14
can you make it easy for me and show me the full code to be clear for me>>>if you can — mohammed alani, Feb 18 '19 at 15:18

twain · Accepted Answer · 2019-02-18T16:01:15.520

Your code won't work, cause you set the next sibling to left, but in the next iteration this sibling still get float: right.

As Jeppe mentioned in his comment you could use an index like this:

var index = 0;
$('section article').each(function (i, element) {
    var setFloat = (index % 2 === 0) ? "right" : "left";
  $(element).find('div.inner').css('float', setFloat);
  index++;
});

EDIT:

The CSS solution from dfliess was on the right way, but since there is only one div.inner in every article tag it will not work this way, cause every article has only one div.inner child.

If you still want a CSS only solution, you could do something like this:

section:nth-of-type(odd) article div.inner {
    float: left;
}

section:nth-of-type(even) article div.inner {
    float: right;
}

This one gives the styles to the div.inner of every odd/even section. Working fiddle here: https://jsfiddle.net/jg6ht1ro/

You're welcome :). I updatet my answer, if you still want a css only solution — twain, Feb 18 '19 at 16:01
I think it is cleaner with CSS. `.css(...)` applies the styling on the `style` attribute, which is a lot harder to maintain IMO. — Jeppe, Feb 18 '19 at 16:23

score 2 · Answer 2 · answered Feb 18 '19 at 15:24

You can try with @tawin answer or I would suggest to use css selector :nth-child

Try with something like:

section article div.inner:nth-child(odd) {
    float:left;
}

section article div.inner:nth-child(even) {
    float:right;
}

More info on https://developer.mozilla.org/es/docs/Web/CSS/:nth-child

how to affect foreach items style every item alone

2 Answers2