Неправильный выбор div, содержащего класс - PullRequest
0 голосов
/ 13 мая 2019
  1. Найдите div, содержащий элемент 'a' с определенным классом (этот шаг был успешным)
  2. Для этого конкретного div (содержащий элемент 'a' сопределенный класс), другой класс должен быть найден, для которого класс будет удален.Этот шаг заканчивается неудачей, потому что все div, содержащие класс filter-options-title, потеряют «закрытый» класс.

    <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>

Ответы [ 3 ]

1 голос
/ 13 мая 2019

@ 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 для .filter-options-title и удалена .closed класс.

0 голосов
/ 13 мая 2019

Вы можете использовать некоторую «инвертированную» логику: запрашивать элементы <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>
0 голосов
/ 13 мая 2019

Сначала нужно найти все элементы, которые имеют класс 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');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...