Выберите встроенные элементы без текстовых сообщений

Question

Мне нужно выбрать встроенные HTML-элементы, которые являются единственными элементами внутри их родительского элемента, то есть нет текста или других встроенных элементов до или после них.

<p><img src="foo.jpg"></p><!-- This should be selected --> 
<p>Hello world! <img src="bar.jpg"></p><!-- This should not --> 

Любой способ сделать это с помощью CSS или jQuery? Я пробовал :first-child и :first-of-type, но они соответствуют обоим этим элементам.

Answer 1

.children() будет выбранными вами детьми. Вы могли бы потенциально добавить их в массив, если вы хотите использовать их для последующего использования или просто распечатать их с помощью console.log()

$('p').each(function() { 
    if ($(this).text().length === 0) { 
     $(this).children(); 
    } 
}); 

Как было отмечено, если <a> присутствовал с текстом внутри него (то есть <a href="www.google.com">Google</a> тогда кода выше не работает Если вы находитесь в этой следующей ситуации, где это дети его собственный текст, используйте val() в состоянии вместо:.

$('p').each(function() { 
    if ($(this).val().length === 0) { 
     $(this).children(); 
    } 
}); 

Answer 2

вы можете использовать :first для получения первого р тег из многообразны:

$("p:first) 

Answer 3

Для достижения этой цели вы можете проверить длину contents() элемента:

var $p = $('p').filter(function() { 
    return $(this).contents().length == 1; 
}); 

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

Answer 4

Вы можете сделать это с помощью небольшой комбинации CSS и JavaScript (jQuery здесь для краткости).

var children = $(":only-child").filter(function() { 
    return !this.previousSibling && !this.nextSibling; 
}); 

Селектор :only-child начинает поиск с элементами, которые не имеют ни одного элемента братьев. Тогда previous/nextSibling вернет текстовый узел, если он есть, или null, если нет. Если обе стороны равны null, то нет ни одного текстового узла, так что элемент действительно один.

Answer 5

Нужно было бы проверить, нет ли дочернего узла и его nodeType. Метод jQuery contents() получит все дочерние узлы, включая текст и комментарии.

Ниже приведен пример сценария, который будет отмечать единичные узлы, а также пункты, которые содержат одиночные узлы:

var notAcceptableNodeTypes = [3, 4, 8]; 
 
$('p').filter(function() { 
 
    var nodes = $(this).contents(); 
 
    var isSingle = nodes.length==1 && $.inArray(nodes[0].nodeType, notAcceptableNodeTypes) == -1; 
 
    if(isSingle) nodes.addClass('is-single'); 
 
    return isSingle; 
 
}).addClass('no-text');

.no-text { 
 
    border: 2px solid red; 
 
} 
 
.is-single { 
 
    border: 2px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><img src="http://placehold.it/75x75"></p> 
 
<p>Hello world! <img src="http://placehold.it/75x75"></p> 
 
<p><img src="http://placehold.it/75x75"><img src="http://placehold.it/75x75"></p> 
 
<p>Hello world!</p> 
 
<p><!-- COMMENT --><img src="http://placehold.it/75x75"></p>

Также на Playground.