jquery 单个查询中的多个选择器

Question

我有各种列表，在这些列表中我有复选框列表，我展示了更多/更少的功能。

现在，一切正常，但我想将一些逻辑转换为一个班轮，尝试了各种方法但没有成功，所以在这里发布。

这是 HTML 部分，假设我有多个这样的列表。

<div id="list-special-needs">
    <h4 class="filter-header">Special Needs</h4>

    @foreach (var item in specialNeeds)
    {
        <div class="am-checkbox" style="padding: 3px 0;">
            <input id="chk-special-needs-@item.ToLower()" name="special-needs" value="@item" type="checkbox" class="schedulerepeat-checkbox" onclick="return prepareSearchParams()" />
            <label for="chk-special-needs-@item.ToLower()" class="margin-h-10 mobile-padding">@item</label>
        </div>
    }

    <p onclick="return loadMore(this, 'list-special-needs', '@specialNeeds.Length')" class="show-more">Show more...</p>
</div>
<div class="clearfix"></div>

Js：

<script type="text/javascript">
    PageEvent.add(PageEvent.AFTER_INIT, function () {
        $("#list-services .am-checkbox").slice(5).hide();
        $("#list-timing .am-checkbox").slice(5).hide();
        $("#list-special-needs .am-checkbox").slice(5).hide();        
        $("#list-neighborhoods .am-checkbox").slice(5).hide();
    });

    function loadMore(element, listId, length) {
        var listSelector = $(`#${listId} .am-checkbox`);
        var isShowMore = $(element).text() == 'Show more...';

        if (isShowMore) {
            //..show more
            $(element).text('Hide...');
            listSelector.slice(0, length).slideDown();

        } else {
            //..hide
            $(element).text('Show more...');
            listSelector.slice(5).slideUp();
        }
    }
</script>

我只想把它转换成一个班轮。

$("#list-services .am-checkbox").slice(5).hide();
$("#list-timing .am-checkbox").slice(5).hide();
$("#list-special-needs .am-checkbox").slice(5).hide();        
$("#list-neighborhoods .am-checkbox").slice(5).hide();

虽然我试过了，但是没用。

$("#list-services .am-checkbox, #list-timing .am-checkbox ..").slice(5).hide();

任何帮助将不胜感激。

Answer 1

您应该分别使用它们中的每一个。所以从你的代码：

$("#list-services .am-checkbox, #list-timing .am-checkbox ..").slice(5).hide();

我们可以利用它循环遍历并攻击每一个

Array.from($("#list-services .am-checkbox, #list-timing .am-checkbox ..")).forEach(elem => {elem.slice(5).hide());

虽然我建议为每个具有 te list-... ID 的块添加一个类，但代码更好，并且可以使用：

Array.from($(".list-block .am-checkbox")).forEach(elem => {elem.slice(5).hide());

Answer 2

创建带有 id 的元素数组，然后为每个搜索同一个类并做一些事情...

[...$("#list-services"), ...$("#list-timing"), ...$("#list-special-needs"), ...$("#list-neighborhoods")].forEach(el => {
  $(el).find(".am-checkbox").slice(5).hide()
})

“需要更优雅的东西”

美在旁观者眼中，这个够漂亮吗？

[...document.querySelectorAll("#list-services, #list-timing, #list-special-needs, #list-neighborhoods")].forEach(el => $(el).find(".am-checkbox").slice(5).hide())

[...document.querySelectorAll("#list-services, #list-timing, #list-special-needs, #list-neighborhoods")].forEach(el => $(el).find(".am-checkbox").css("color", "red"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list-services">
  <div class="am-checkbox">1</div>
</div>

<div id="list-timing">
  <div class="am-checkbox">2</div>
</div>
<div id="list-special-needs">
  <div class="am-checkbox">3</div>
</div>
<div id="list-neighborhoods">
  <div class="am-checkbox">4</div>
</div>