CODEWITHSUNDEEP
jqueryrazorasp.net-core
mohammed alani
mohammed alani

Reputation: 366

how to effect on each item style (css) is different from the other item inside foreach statement

i used "foreach" statement to access all items of IEnumerable and present it in details page ....and i want to make background color of each item different from the other items ....so i used random color process using jQuery to affects on each item....but when i run the code all items became with the same color.....how to affects on each item alone and make its color different?

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>
    var items = ['FFFFCC', 'FFFF99', 'FFFF66', 'FFFF33', 'FFFF00', 'CCCC00', 'FFCC66', 'FFCC00', 'FFCC33', 'CC9900', 'CC9933', '996600', 'FF9900', 'FF9933', 'CC9966', 'CC6600', '996633', '663300', 'FFCC99', 'FF9966', 'FF6600', 'CC6633', '993300', '660000', 'FF6633', 'CC3300', 'FF3300', 'FF0000', 'CC0000', '990000', 'FFCCCC', 'FF9999', 'FF6666', 'FF3333', 'FF0033', 'CC0033', 'CC9999', 'CC6666', 'CC3333', '993333', '990033', '330000', 'FF6699', 'FF3366', 'FF0066', 'CC3366', '996666', '663333', 'FF99CC', 'FF3399', 'FF0099', 'CC0066', '993366', '660033', 'FF66CC', 'FF00CC', 'FF33CC', 'FF33CC', 'CC0099', '990066', 'FFCCFF', 'FF99FF', 'FF66FF', 'FF33FF', 'FF00FF', 'CC3399', 'CC99CC', 'CC66CC', 'CC00CC', 'CC33CC', '990099', '993399', 'CC66FF', 'CC33FF', 'CC00FF', '9900CC', '996699', '660066', 'CC99FF', '9933CC', '9933FF', '9900FF', '660099', '663366', '9966CC', '9966FF', '6600CC', '6633CC', '663399', '330033', 'CCCCFF', '9999FF', '6633FF', '6600FF', '330099', '330066'
    ];

    var item = items[Math.floor(Math.random() * items.length)];
    $('section#timeline article:nth-child(1) div.inner h2').css('background-color', '#' + item);
</script>

Upvotes: 0

Views: 88

Answers (1)

Andrei
Andrei

Reputation: 56716

First of all, see @carsten-løvbo-andersen comment about id. Assuming this is fixed...

You are not terribly far. But you need to iterate through these articles, and set color of each. Right now you are just setting the color of child 1.

var items = ...

$('section article').each(function(i, element){
    var item = items[Math.floor(Math.random() * items.length)];
    $(element).find('div.inner h2').css('background-color', '#' + item);
});

Upvotes: 1

Related Questions