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

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]

$('a.myclass:not(:has(> img))').removeClass('myclass');

или

[...document.querySelectorAll('a.myclass')]
  .filter(n => ![...n.children].some(m => m.tagName === 'IMG'))
  .forEach(n => n.classList.remove('myclass'));

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, Спасибо за пояснение!