Question

我使用“ 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>

Answer 1

您的代码将不起作用，因为您将下一个兄弟姐妹设置为left，但是在下一次迭代中，该兄弟姐妹仍然会获得float: right。

正如Jeppe在他的评论中提到的那样，您可以使用类似这样的索引：

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

编辑：

dfliess的CSS解决方案是正确的方法，但是由于每个div.inner中只有一个article tag，因此无法正常工作，因为每个article只有一个{ {1}}。

如果您仍然想要仅CSS的解决方案，则可以执行以下操作：

div.inner child

此样式为每个奇/偶节的section:nth-of-type(odd) article div.inner { float: left; } section:nth-of-type(even) article div.inner { float: right; }提供样式。在这里工作：（https://jsfiddle.net/jg6ht1ro/

Answer 2

您可以尝试使用@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的更多信息

如何影响foreach项目单独设置每个项目的样式

2 个答案: