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

Posted 2023-05-09

【中文标题】jquery 单个查询中的多个选择器

【英文标题】：jquery multiple selectors in single query

【发布时间】：2021-05-28 19:09:34

【问题描述】：

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

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

这是 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="[e-mail]()" name="special-needs" value="@item" type="checkbox" class="schedulerepeat-checkbox" onclick="return prepareSearchParams()" />
            <label for="[e-mail]()" 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();

任何帮助将不胜感激。

【参考方案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());

【讨论】：

我建议添加一个类：那么它不会达到目的。使用 id，我可以针对特定列表并显示更多/更少。如果我使用类，它不会那样工作。如果我错了，请纠正我。

当然，但这取决于。如果您有 3 个选项，那么您可以向它们添加 3 个类并以每个类为目标。以class="clients admin guest" 为例，以class="clients admin" 为例。您可以根据自己的用例在 JS 中使用任一类。

明白你的意思，所以它不是 id，而是一个类。但它会产生积极的影响吗？

您可以将多个类添加到同一个元素以匹配不同的用例。

【参考方案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>

【讨论】：

看起来不错，但需要更优雅的东西。

ikik，您的解决方案只需进行少量修改即可正常工作。谢谢！