как повлиять на каждый элемент стиля в отдельности - PullRequest
Новая
       5

как повлиять на каждый элемент стиля в отдельности

0 голосов
/ 18 февраля 2019

я использовал оператор "foreach" для доступа ко всем элементам IEnumerable и представления его на странице подробностей .... и я хочу, чтобы свойство float каждого элемента отличалось от других элементов .... поэтому я использовал jQuery для аффектовна каждом элементе .... но когда я запускаю код, все элементы становятся в одном и том же направлении ..... как воздействовать на каждый элемент в отдельности и направлять его с первого на право и второго на левое и третье на правое ...etc?

вот код HTML: 

@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>
}

и код jQuery: 

<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>

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Вы можете попробовать с ответом @tawin, или я бы предложил использовать селектор css: nth-child

Попробуйте что-то вроде: 

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

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

Подробнее о https://developer.mozilla.org/es/docs/Web/CSS/:nth-child

0 голосов
/ 18 февраля 2019

Ваш код не будет работать, потому что вы установите следующего брата на left, но на следующей итерации этот брат все равно получит float: right.

Как упомянул Джеппе в своем комментарии, вы можете использоватьиндекс как этот: 

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

РЕДАКТИРОВАТЬ:

Решение CSS от dfliess было на правильном пути, но, так как есть только один div.inner в каждом article tag, оно не будет работатьтаким образом, потому что у каждого article есть только один div.inner child.

Если вам все еще нужно решение только для CSS, вы можете сделать что-то вроде этого: 

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

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

Этот даетстили для div.inner каждого нечетного / четного раздела.Рабочая скрипка здесь: https://jsfiddle.net/jg6ht1ro/

...