javascript - 如果数组中的位置超过 5 个，则显示不同的值

Question

我有以下标记:

<p class="country" data-country="UK">lon</p>
<p class="country" data-country="UK">lon</p>
<p class="country" data-country="UK">lon</p>
<p class="country" data-country="UK">lon</p>
<p class="country" data-country="UK">lon</p>

<p class="country" data-country="IT">milan</p>
<p class="country" data-country="IT">milan</p>

我希望将其更改为:

 <p> various UK location</p> (based on having more the 5 cities for the same country)

<p class="country" data-country="IT">milan</p>
<p class="country" data-country="IT">milan</p>

到目前为止我已经:

var countries = [];

$("p.country").each(function(){
    countries.push($(this).data("country")); 
});

var unqiueCountries = countries.filter(function(item, pos) {
    return countries.indexOf(item) == pos;
}) // get unique values per country


for(var i =0; i < unqiueCountries.length; i++ ){
    $("p.country").each(function(){
        if($(this).data('country') == unqiueCountries[i]) { // as long as the countries match check if there are more then 5 locations
            if ($(this).data('country').length >= 5) {
                console.log('various location');
            }
        }
    })
}

逻辑中的某些内容未按预期工作。

Answer 1

代码中 $(this).data('country').length 的值始终为 2，因为它是 data 属性中值的长度。它与具有相同属性值的元素数量没有任何关系。

但是您不需要那么多代码来执行此操作:

$("p.country").each(function() {
    var country = $(this).data("country"),
        $match = $('[data-country="' + country +'"]');
    if ($match.length < 5) return;
    $(this).before($("<p>").text("various " + country + " locations"));
    $match.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="country" data-country="UK">lon</p>
<p class="country" data-country="UK">lon</p>
<p class="country" data-country="UK">lon</p>
<p class="country" data-country="UK">lon</p>
<p class="country" data-country="UK">lon</p>

<p class="country" data-country="IT">milan</p>
<p class="country" data-country="IT">milan</p>