如何检查具有相同类名的元素是否具有足够的元素？

如果popOver只有在元素数量为counter后才会显示，并且具有相同的类名？（计数器将包括第一元素）如何检查具有相同类名的元素是否具有足够的元素？

实施例：（随着计数器= 3）

bar 
bar 
foo 
bar 
foo 
foo 
bar <-- PopOver would show up here 
bar 
bar 
foo <-- PopOver would show up here 
foo 
foo 
foo

实施例：（随着计数器= 2）

bar <-- PopOver would show up here 
bar 
foo 
bar 
foo <-- PopOver would show up here 
foo 
bar <-- PopOver would show up here 
bar 
bar 
foo <-- PopOver would show up here 
foo

$(".bar").each(function(){ 
 
    $(this).append("<div class='popOver'>these would be recommended</div>"); 
 
});

.bar { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.popOver{ 
 
    width:400px; 
 
    height: 30px; 
 
    background: green; 
 
    position: absolute; 
 
    z-index: 999; 
 
    margin-left: 40px; 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
</ul>

来源

2016-10-03 Chris Beckett

上@Praveen库马尔的答案稍有改善，这个功能应该做你想要什么：

function addPopOverEvery(n, selector) { 
 
\t $(selector).each(function() { 
 
\t \t var $original = $(this), 
 
\t \t $self = $(this), 
 
\t \t $is_pop = true, 
 
\t \t i = 0; 
 
\t \t if ($original.prev().is(selector)) { 
 
\t \t \t for (i = 1; i < n; i++) { 
 
\t \t \t \t $self = $self.prev(); 
 
\t \t \t \t if (!$self.is(selector) || $self.find('.popOver').length) { 
 
\t \t \t \t \t $is_pop = false; 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t \t if ($is_pop) { 
 
\t \t \t $self = $original; 
 
\t \t \t for (i = 1; i < n; i++) { 
 
\t \t \t \t $self = $self.next(); 
 
\t \t \t \t if (!$self.is(selector)) { 
 
\t \t \t \t \t $is_pop = false; 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t \t if ($is_pop) { 
 
\t \t \t $original.append("<div class='popOver'><-- these would be recommended</div>"); 
 
\t \t } 
 
\t \t console.log($original.get(0)); 
 
\t }); 
 
} 
 

 
addPopOverEvery(3, '.bar');

.bar { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.popOver{ 
 
    width:300px; 
 
    height: 30px; 
 
    background: green; 
 
    position: absolute; 
 
    display: inline-block; 
 
    z-index: 999; 
 
    margin-left: 40px; 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
</ul>

以2：

function addPopOverEvery(n, selector) { 
 
\t $(selector).each(function() { 
 
\t \t var $original = $(this), 
 
\t \t $self = $(this), 
 
\t \t $is_pop = true, 
 
\t \t i = 0; 
 
\t \t if ($original.prev().is(selector)) { 
 
\t \t \t for (i = 1; i < n; i++) { 
 
\t \t \t \t $self = $self.prev(); 
 
\t \t \t \t if (!$self.is(selector) || $self.find('.popOver').length) { 
 
\t \t \t \t \t $is_pop = false; 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t \t if ($is_pop) { 
 
\t \t \t $self = $original; 
 
\t \t \t for (i = 1; i < n; i++) { 
 
\t \t \t \t $self = $self.next(); 
 
\t \t \t \t if (!$self.is(selector)) { 
 
\t \t \t \t \t $is_pop = false; 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t \t if ($is_pop) { 
 
\t \t \t $original.append("<div class='popOver'><-- these would be recommended</div>"); 
 
\t \t } 
 
\t \t console.log($original.get(0)); 
 
\t }); 
 
} 
 

 
addPopOverEvery(2, '.bar');

.bar { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.bar { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.popOver{ 
 
    width:300px; 
 
    height: 30px; 
 
    background: green; 
 
    position: absolute; 
 
    display: inline-block; 
 
    z-index: 999; 
 
    margin-left: 40px; 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
</ul>

来源

2016-10-03 15:04:17 Makaze

您是否尝试过'addPopOverEvery（2）;'.. –

addPopOverEvery（n）有问题;例如。像@ ZakariaAcharki说你尝试过addPopOverEvery（2）;因为如果连续有3个元素具有相同的类，则第一个元素和第二个元素会获得popOver –

添加catch alls，谢谢您的反馈。现在怎么样？ – Makaze

您可以使用+运算符。选择器：

.bar + .bar + .bar

选择第三个连续的.bar并做任何你想做的事情。

$(".bar + .bar + .bar").each(function(){ 
 
    $(this).append("<div class='popOver'>these would be recommended</div>"); 
 
});

.bar { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.popOver{ 
 
    width:400px; 
 
    height: 30px; 
 
    background: green; 
 
    position: absolute; 
 
    z-index: 999; 
 
    margin-left: 40px; 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
</ul>

可以使用.repeat功能使其可定制：

var n = 3; 
 

 
$(".bar" + " + .bar".repeat(n - 1)).each(function(){ 
 
    $(this).append("<div class='popOver'>these would be recommended</div>"); 
 
});

.bar { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.popOver{ 
 
    width:400px; 
 
    height: 30px; 
 
    background: green; 
 
    position: absolute; 
 
    z-index: 999; 
 
    margin-left: 40px; 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
</ul>

凡n值将与同一类的元素个数。

来源

2016-10-03 14:22:53

对不起，我刚刚更新了我有位的更多信息的问题。 –

@ChrisBeckett我已经更新了我的答案。如果它看起来不错，请接受它。提前致谢。 '：D' –

看看我的问题，我刚刚更新了一个快速示例。提前致谢。 –

由于您没有特定的class，因此无法使用+符号完成，因此您必须使用if - else条件和计数器以编程方式执行此操作，以验证连续类的数量是否等于我们的计数器，请检查示例波纹管。

希望这会有所帮助。

var nbr = 3; 
 
var count = 0; 
 
var last_class = $('li:first').attr('class'); 
 

 
$('li').each(function(index) 
 
{ 
 
    if($(this).attr('class')===last_class) 
 
    { 
 
    count++; 
 
    last_class = $(this).attr('class'); 
 
    }else{ 
 
    count=1; 
 
    last_class = $(this).attr('class'); 
 
    } 
 

 
    if(count===nbr){ 
 
    $('li:eq('+(index-(nbr-1))+')').append("<span class='popOver'> <= these would be recommended</span>"); 
 
    
 
    count=0; 
 
    } 
 
    
 
});

.bar { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.popOver{ 
 
    width:250px; 
 
    height: 18px; 
 
    background: green; 
 
    position: absolute; 
 
    z-index: 999; 
 
    margin-left: 40px; 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="bar">Bar</li> 
 
    <li href="#" class="foo">Foo</li> 
 
</ul>

来源

2016-10-03 16:51:34

如何检查具有相同类名的元素是否具有足够的元素？

回答

相关问题