Как узнать, что ul список состоит из ссылок?

Question

[starostyants]

Как с помощью JS отличить список такого вида:

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

от такого:

<ul>
  <li>Some text</li>
   <li>More some text</li>
   <li>I need more text</li>
</ul>

и от такого:

<ul>
  <li>Some text <a href="#">and some link</a></li>
   <li>More some text</li>
   <li>I need more text</li>
</ul>

Answer 1

[0xD34F]

const isLinks = Array
  .from(ul.querySelectorAll(':scope > li'))
  .every(n => n.childNodes.length === 1 && n.childNodes[0] instanceof HTMLAnchorElement);

или

const isLinks = Array.prototype.every.call(
  ul.children,
  ({ childNodes: [ a, b ] }) => a.tagName === 'A' && !b,
);

Comments

[starostyants]

К сожалению, Ваш вариант не предусматривает списки такого вида (решение должно возвращать "false"):

<ul>
   <li>Some text <a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
</ul>

[0xD34F]

обновил ответ

Answer 2

[Stalker_RED]

сам принцип проверок можно использовать, но вообще решение довольно "грязное"

Comments

[starostyants]

К сожалению, Ваш вариант тоже не предусматривает списки такого вида (решение должно возвращать "false"):

<ul>
   <li>Some text <a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
</ul>

[Stalker_RED]

starostyants, Очень даже предусматривает и возвращает "все со ссылками"
у вас там три варианта, просто true-false не прокатывает же.
Но вы можете заменить возвращаемы строчки на что хотите.

[starostyants]

Stalker_RED, возможно, мне стоило сформулировать вопрос более понятно и привести побольше примеров. Состоит из ссылок !== Содержит ссылки

[Stalker_RED]

starostyants, в любом случае, у меня там проверяются все три варианта:
(1) ссылок нет, (2) ссылки в каждом пункте списка и (3) ссылки есть, но не везде.

Можете возвращать true/false в любой комбинации в какой вам нужно.

[starostyants]

Stalker_RED, ещё раз

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

не равно

<ul>
  <li>Лишний текст, теги и пр.<a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

Посмотрите ветку комментариев 0xD34F, и проанализируйте решение, там всё согласно задаче.

[Stalker_RED]

starostyants, да, теперь я понял в чем вопрос. Моя невнимательность с вашими формулировками дали свои плоды.

А вариант 0xD34F, точно правильно работает?

[starostyants]

Stalker_RED, да его пример отрабатывает корректно. В Вашем случае, в третьем списке перед тегом a размещено по четыре пробельных символа, что фиддл интерпретировал как строку. Парсер же браузера будет автоматически удалять пробелы и символы табуляции между тегами

[Stalker_RED]

starostyants, и вы ведь не шутите, вот что самое страшное.

https://developer.mozilla.org/ru/docs/Web/API/Node...