Question

页面加载时，所有具有卡片类的div都必须具有slideUp

这是我试图做的，但是没有用。

$(document).ready(function () {
            const div = Array.from(document.querySelectorAll('.flex-wrap .d-flex'));
            $(div).slideUp(500);
            console.log(div);
        })

HTML本身带有块div

<div class="d-flex flex-wrap">
    @foreach (var item in ViewBag.UserTodoList)
    {
        <div class="card" style="width: 32%; margin-left: 1%; margin-top:1%">
            <div class="card-body">

                <h5 hidden class="itemName">@item.Name</h5>
                <h5 class="card-title">@item.Name</h5>
                @if (item.Body.Length > 80)
                {

                    <p hidden class="fullBody">@item.Body</p>
                    <p id="body" class="card-text">@item.Body.Substring(0, 80)...</p>
                    <button class="btn btn-info buttonShow" id="1234">Прочитать</button>
                }
                else
                {
                    <p class="card-text">@item.Body</p>

                }

                <a @*asp-controller="ToDo" asp-action="DeleteTodos" asp-route-todoId="@item.Id"*@ id="buttonDelete" class="btn btn-primary btnDelete">Удалить</a>
            </div>
        </div>
    }
</div>

这怎么办？

Answer 1

实施中的问题是，您没有将函数slideUp应用于所查询的每个元素，而是试图将其应用于这些元素的数组。

要解决此问题，请稍稍调整代码为：

...
const div = Array.from(document.querySelectorAll('.flex-wrap .d-flex'));
div.forEach(el => $(el).slideUp(500));
...

如您所见，执行querySelectorAll然后创建一个数组时，您有正确的直觉来抓住所有元素。有了Array之后，您就可以快速使用forEach之类的Array方法，并将jQuery函数应用于Array中的每个项目。

Answer 2

页面加载时，所有具有卡片类的div都必须具有slideUp

您可以使用Jquery获得具有card类的所有div：

$(function () {

  $("div .card").each(function () {
      $(this).slideUp(5000);
  });

})

加载页面jQuery时滑动所有div

2 个答案: