如何檢查具有相同類名的元素是否具有足夠的元素？

Question

如果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>

Answer 1

上@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>

Answer 2

您可以使用+運算符。選擇器：

.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值將與同一類的元素個數。

Answer 3

由於您沒有特定的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>