Целевые элементы с одним дочерним элементом И без текстовых узлов вне этого дочернего элемента с использованием jQuery

Используя jQuery, я пытаюсь настроить таргетинг на все элементы абзаца, которые содержат только дочерний элемент привязки (как прямой потомок) И не имеют текстовых узлов за пределами этого дочернего элемента, например:

<p><a href="http://...">Some link</a></p>

Я пробовал селектор jQuery only-child, но текстовые узлы, очевидно, не рассматриваются как дочерние элементы. Я также посмотрел на contents() и предположил, что могу ориентироваться на элементы привязки, открывающий тег которых является первым узлом. Однако в последнем случае сайт, который я создаю, представляет собой блог, который другие будут писать для использования CMS, и поэтому я не могу гарантировать, что они не начнут обычный абзац со ссылки, которая добавила бы нежелательный стиль.

Я относительно новичок в jQuery - около месяца. Просто чтобы вы знали...

Спасибо!


jquery children textnode
person lukebm    schedule 14.09.2015    source источник
comment
вы можете попробовать использовать .text().length, он возвращает длину текста внутри элемента и игнорирует фрагменты HTML (например, "<i>"). Объедините это с циклом $.each, и вы сможете проверить каждый дочерний узел на его text().length.   -  person zeropublix    schedule 14.09.2015

Ответы (2)


arrow_upward
2
arrow_downward

Рабочая скрипта

$('p').filter(function() {
  return ( 1 === $(this).find('*').length && 1 === $(this).find('a').length && $(this).text() === $(this).find('a').text() );
});

Редактировать: я не знал о селекторе :only-child в первую очередь. С ним еще чище:

$('p').has('a:only-child').filter(function() {
    return $(this).find('a').text() === $(this).text();                  
});
person Alex    schedule 14.09.2015
comment
Спасибо, Алекс! Это именно то, что я ищу. Прочитав это несколько раз, кажется таким ясным, логичным решением. Спасибо еще раз! - person lukebm; 14.09.2015

arrow_upward
1
arrow_downward

Вдохновленный комментарием Zeropublix:

$("p").has("a:only-child").filter(function() {
    return $(this).find("a").text() === $(this).text();                  
});

Вы также можете создать прототип, чтобы сделать код чище:

$.fn.onlyChild = function(child) {
   return this.has(child + ":only-child").filter(function() {
        return $(this).find(child).text() === $(this).text();                  
    });
}

Рабочая скрипта.

person Anders    schedule 14.09.2015
comment
Большое спасибо, Андерс. Мне нужно понять петли, так что я тоже поиграю с этим. Ваше здоровье - person lukebm; 14.09.2015