Как удалить класс у элемента при отсутствии определенного дочернего элемента?

Question

[Алексей Эвлайт]

Суть задачи:
Сайт на WP запиленный непонятно кем.
Попросили поправить маленький косяк:
Ко всем ссылкам через плагин добавляется класс (например, myclass) для создания эффекта lightbox для увеличения картинок.
Данный класс вешается также и на обычные ссылки, и при переходе по обычной ссылке внутренние страницы пытаются открыться во всплывающем окне.

Как я думаю можно было бы решить проблему: сделать проверку на наличие внутри ссылки картинки, и при ее отсутствии удалить класс у ссылки.

Вот как выглядит код картинки внутри ссылки на сайте:

<a href="picture.jpg" class="myclass"><img src="picture.jpg"></a>

Пробовал написать такое:

$(document).ready(function() {
   var anyf = $('a').children('img').length;
   if (anyf < 1) 
      {
        $('.myclass').removeClass('myclass')
      };
  }
    )

Но код делает абсолютно не то, что хотелось бы.

Убрать автоматическое добавление класса не вариант, тк сайтом занимаются "тетеньки", которые новость просят опубликовать хоть кого-нибудь.
Отключить плагин и поставить другой тоже не получится (шаблон написан так, что при отключении плагина начинают вылезать ошибки на разных страницах).

Answer 1

[0xD34F]

Кто должен отсутствовать и какой класс надо удалить:

const childSelector = 'img';
const className = 'myclass';

Удаляем:

$(`.${className}:not(:has(> ${childSelector}))`).removeClass(className);

или

document.querySelectorAll(`.${className}`).forEach(n => {
  n.classList.toggle(className, !!n.querySelector(`:scope > ${childSelector}`));
});

или

const elems = document.getElementsByClassName(className);
for (let i = elems.length; i--;) {
  if (!Array.prototype.some.call(elems[i].children, n => n.matches(childSelector))) {
    elems[i].classList.remove(className);
  }
}

Comments

[Алексей Эвлайт]

Спасибо! Сработало.
Удаляется у ссылок при отсутствии вложенных картинок корректно

Answer 2

[MrTimon]

Как вариант удалить все класы "myclass" и добавить только там где нужно самому, аля:

<script>
  $(document).ready(function() {
      $('a.myClass').removeClass('myClass');
      $('img').parent('a').addClass('myClass');
  });
</script>

Можно немножко усложнить и перебирать все имиджи детально и искать парент ссылки где src имиджа равно href параметру ссылки и только им добавлять клас.

другой способ перебрать все ссылки каторые имеют имдж как сделали вы толко надо так:

$(document).ready(function() {
      $('a.myClass').filter(function(item) {
            return $('>img',$(item)).length == 0
      }).removeClass('myClass');
  });

Должно работать

Comments

[Алексей Эвлайт]

Да, я думал насчет варианта удалить везде и добавить только там, где надо.
Попробовал Ваш вариант: скрипт перестал отрабатывать. Как я понял, он работает только с тем классом, который добавил сам.

Пытался найти в скрипте это, чтобы поправить, но там скрипт в 1 строку и с тьмой переменных...

В принципе, вопрос Топика таким способом решен, за что спасибо :) Но всплывашку на картинках желательно бы оставить...

Второй вариант снес все классы - у всех ссылок вне зависимости от наличия внутри картинок.

[MrTimon]

JustFeeLin, а ну да. я ошибся в фильтере там нужно this поставить вместо item. Item - это индекс елемента

[Алексей Эвлайт]

$(document).ready(function() {
      $('a.myClass').filter(function(item) {
            return $('>img',$(this)).length == 0
      }).removeClass('myClass');
  });

Спасибо! Сработал такой вариант.
Как я понял, он перебирает все ссылки с классом и благодаря this возвращает индексы тех, где длинна тега img внутри ссылки равна нулю.
Так?

[MrTimon]

JustFeeLin, он перебирает все ссылки с классом и возращает в колекции только те, которые не имеют дочернего елемента img. Контрукция $('>img',$(this)) ищет дочерний елемент img в обекте $(this) а length возращает количетво таких имиджов. Тоисть из всех ссылок мы вибирает только те, количество имеджов в которых равно 0 и им убираем класс. Впринцепе тоже самое что и у 0xD34F но в более компактном виде.

[Алексей Эвлайт]

MrTimon, Спасибо за пояснение!