jQuery prepend（）到包含Div的元素

Question

我试图在每个包含至少一个div的每个div前面加上一个div。类似于此的东西，但实际上有效的东西：

if ($('.tooltip-item').children('div').size() > 1) {
$('.tooltip-item').prepend('<div class="star">*</div>');
}

我的html设置如下

<a id="filterItems" class="tooltips" href="#">XBOX
    <span class="tooltip-container">
        <div class="tooltip-item">Controller</div>
        <div class="tooltip-item">Console
            <div class="filter-item">In Stock</div>
            <div class="filter-item">Pre-Order</div>
        </div>
    </span>
</a>

在这个例子中，我想将（）我的前置（仅限于“控制台”，但我尝试的每种方法最终都会为每个项目设置一个div，或者没有项目。我怎样才能添加到包含div的“Console”div？

Answer 1

尝试在此上下文中使用.filter()来完成您的任务，

$('.tooltip-item').filter(function(){
  return $(this).children().length;
}).prepend('<div class="star">*</div>');

DEMO

注意：请检查所需元素以确保正确无误。

Answer 2

在jquery中尝试.each()

$('.tooltip-item').each(function(){
   $(this).prepend('<div class="star">*</div>');
});

Answer 3

遍历每个元素，否则只需要第一个元素

$('.tooltip-item').each(function () {
    if ($(this).children('div').size() > 1) {
        $(this).prepend('<div class="star">*</div>');
    }
});

Answer 4

您可以像这样使用:has选择器：

$('.tooltip-item:has(*)').prepend('<div class="star">*</div>');

或.has()方法：

$('.tooltip-item').has('*').prepend('<div class="star">*</div>');

Demo.

请注意，使用.has()方法可以提高性能。您可以将*选择器替换为您想要的任何选择器，例如div，以便再次检查现有div。

.has()

:has

Answer 5

您可以使用filter()检查您在特定元素集上需要的条件。试试这个：

$('.tooltip-item').filter(function() {
    return $(this).find('> div').length > 0;
}).prepend('<div class="star">*</div>');

Example fiddle

Answer 6

使用 .has() 或:has选择器。

在这种情况下，

.children()的效果略有下降，因为您的动机只是查找.tooltip-item是否有<div>

$('.tooltip-item:has("div")').prepend('<div class="star">*</div>');

或者

$('.tooltip-item').has('div').prepend('<div class="star">*</div>');

Working Fiddle

Answer 7

要检查具有filter-item类元素作为其子元素的div，
使用 -

$('.tooltip-item:has(".filter-item")').prepend('<div class="star">*</div>');

OR 如果您只想检查div，请使用 -

$('.tooltip-item:has("div")').prepend('<div class="star">*</div>');

Demo

查看usage of :has selector

Answer 8

Demo

您可以使用$(".tooltip-item:has('div')")

最终答案

$(".tooltip-item:has('div')").prepend('<div class="star">*</div>');