Question

查找包含具有特定类的'a'元素的div（此步骤已成功完成）

对于该特定的div（包含具有特定类的'a'元素），应找到另一个要删除其类的类。此步骤失败，因为所有包含filter-options-title类的div都将丢失“ closed”类。

<script>
    require(["jquery"], function ($) {
            if ($("div.filter-optie").find('.shopby_link_selected')) {
                $("div.filter-optie").find('.filter-options-title').removeClass('closed'); //this should only happen when the 'a' element with class shopby_link_selected has been found, which is not happening right now with this piece of code.
            }
    });
</script>

有什么想法可以实现以使其更强大并实现我想要的目标吗？

附上HTML：

<div class="filter-optie">
    <dt role="heading" aria-level="3" class="filter-options-title closed">
        <label class="active" for="layered-filter-merk">BRAND</label>
    </dt>
    <dd class="filter-options-content">
        <ol class="items shopby_filter_items_attr_merk">
            <form data-shopby-filter="attr_merk" data-shopby-filter-request-var="merk">
            <li class="item" data-label="LABEL">
                <a class="shopby_filter_item_5cd9ce0ea7fbd shopby_link_selected" href="">
                <input name="shopby[brand][]" value="3989" type="radio" style="" checked="">
                <span class="label">XXXX</span>
                <span class="count">4<span class="filter-count-label">PRODUCTS</span></span>
                </a>
            </li>
            </form>
        </ol>
    </dd>
</div>

Answer 1

@DigitalJedi，几乎是正确的，因为这将从存在.closed的所有地方删除.shopby_link_selected类，但是我认为基于您的html，DOM遍历是不正确的。

$("div.filter-optie .shopby_link_selected").each(function() {
  $(this).closest('.filter-optie).find('.filter-options-title').removeClass('closed');
});

这将找到所有具有类.shopby_link_selected的锚标记，然后针对它们中的每一个，在DOM上搜索父级.filter-optie，然后在DOM上搜索{{1 }}并删除.filter-options-title类。

Answer 2

首先，您必须找到所有具有类shopby_link_selected的元素，那么您只需要从中删除该类。

现在，您的if语句中的代码只是从类.filter-options-title的所有元素中删除了已关闭的内容

$("div.filter-optie .shopby_link_selected").each(function() {
       $(this).find('.filter-options-title').removeClass('closed');
     });

编辑：对不起，我还没有看到代码段，因为我发布得早。正如@Brett East所建议的那样，他的方式可以解决问题：

$("div.filter-optie .shopby_link_selected").each(function() {
  $(this).closest('.filter-optie).find('.filter-options-title').removeClass('closed');
});

Answer 3

您可以使用一些“倒置”逻辑：使用<a>类查询.shopby_link_selected元素，遍历DOM，直到您按下<div>类filter-optie，然后找到要从中删除closed类的元素。

$('.shopby_link_selected').
  closest('.filter-optie').
  find('.filter-options-title').
  removeClass('closed');

<div class="filter-optie">
    <dt role="heading" aria-level="3" class="filter-options-title closed">
        <label class="active" for="layered-filter-merk">BRAND</label>
    </dt>
    <dd class="filter-options-content">
        <ol class="items shopby_filter_items_attr_merk">
            <form data-shopby-filter="attr_merk" data-shopby-filter-request-var="merk">
            <li class="item" data-label="LABEL">
                <a class="shopby_filter_item_5cd9ce0ea7fbd shopby_link_selected" href="">
                <input name="shopby[brand][]" value="3989" type="radio" style="" checked="">
                <span class="label">XXXX</span>
                <span class="count">4<span class="filter-count-label">PRODUCTS</span></span>
                </a>
            </li>
            </form>
        </ol>
    </dd>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

错误选择包含类的div

3 个答案: