CODEWITHSUNDEEP
jqueryrazorasp.net-core
mohammed alani
mohammed alani

Reputation: 366

how to affect foreach items style every item alone

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>

Upvotes: 0

Views: 105

Answers (2)

twain
twain

Reputation: 1325

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/

Upvotes: 2

dfliess
dfliess

Reputation: 21

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

Upvotes: 2

Related Questions