在数组中显示至少一个在线项目

时间:2013-12-04 17:25:19

标签: javascript jquery

我有一组用户,我按距离排序。我想显示最近的5个项目,但有时候最近的5个项目都有“离线”状态,在这种情况下我想确保至少添加1个“在线”项目。

到目前为止,我的尝试还没有完成。它没有显示5个“离线”项目加上我想要的1个“在线”项目,它显示了所有项目。

var items = 0;
var online = usersOnline();
var itemsOnline = 0;
for (var i = 0; i < nearest.length; i++) {
    var item = nearest[i];
    if ( items < 5 ) { 
        items++;
        if ( item.state != "offline" ) { itemsOnline++; }
        jQuery( "#leaflet-control-geosearch-results" ).append( "<li id='record-"+item.label+"'><label><input type='checkbox' class='cb' value='"+item.id+"'>&nbsp;<img src='img/presence/"+item.state+"_map.png' height='10px'> "+item.label+" ("+parseFloat(item.distance  / 1000).toFixed(2)+strings[strLang].nearestMetre+")</label><div class='icons'><a title='"+strings[strLang].nearestLocate+"' class='locate' href='"+item.label+"'><img src='img/icons/locate.png' height='15px' /></a>&nbsp;<a title='"+strings[strLang].routeGet+"' class='directions' href='"+item.label+"'><img src='img/icons/directions.png' height='15px' /></a></div><div class='clear'></div></li>" );
    }
}
while (( online > 0 ) && ( itemsOnline < 1 )) {
    for (var i = 0; i < nearest.length; i++) {
        var item = nearest[i];
        if ( item.state != "offline" ) { 

            itemsOnline++; }
            jQuery( "#leaflet-control-geosearch-results" ).append( "<li id='record-"+item.label+"'><label><input type='checkbox' class='cb' value='"+item.id+"'>&nbsp;<img src='img/presence/"+item.state+"_map.png' height='10px'> "+item.label+" ("+parseFloat(item.distance  / 1000).toFixed(2)+strings[strLang].nearestMetre+")</label><div class='icons'><a title='"+strings[strLang].nearestLocate+"' class='locate' href='"+item.label+"'><img src='img/icons/locate.png' height='15px' /></a>&nbsp;<a title='"+strings[strLang].routeGet+"' class='directions' href='"+item.label+"'><img src='img/icons/directions.png' height='15px' /></a></div><div class='clear'></div></li>" );
        }
    }                           
}   

3 个答案:

答案 0 :(得分:1)

你应该只用一个pass / loop来完成整个事情:

尝试:

var items = 0;
var online = usersOnline();
var itemsOnline = 0;

for (var i = 0; i < nearest.length; i++) {
    var item = nearest[i];

    if (item.state != "offline") {
        itemsOnline++;
    } else if (items >= 5) {
        // we already have 5 items, so we're now only interested in online items. this new one is an offline one, so skip it
        continue;
    }

    items++;
    jQuery( "#leaflet-control-geosearch-results" ).append( "<li id='record-"+item.label+"'><label><input type='checkbox' class='cb' value='"+item.id+"'>&nbsp;<img src='img/presence/"+item.state+"_map.png' height='10px'> "+item.label+" ("+parseFloat(item.distance  / 1000).toFixed(2)+strings[strLang].nearestMetre+")</label><div class='icons'><a title='"+strings[strLang].nearestLocate+"' class='locate' href='"+item.label+"'><img src='img/icons/locate.png' height='15px' /></a>&nbsp;<a title='"+strings[strLang].routeGet+"' class='directions' href='"+item.label+"'><img src='img/icons/directions.png' height='15px' /></a></div><div class='clear'></div></li>" );

    if (items >= 5 && itemsOnline >= 1) {
        // we've now got at least 5 items, and at least 1 is online, so we're done.
        break;
    }
}

答案 1 :(得分:1)

只有在内部for循环完成迭代整个nearest数组后,才会对while循环条件进行求值。

由于您只需要通过nearest数组迭代一次以获取在线项目,您可以使用if语句替换while循环:

if (itemsOnline < 1) {
    for (var i = 5; i < nearest.length; i++) { // start from 6th element
        var item = nearest[i];
        if (item.state != "offline") {
            jQuery("#leaflet-control-geosearch-results").append(etc);
            break; // exit loop
        }
    }
}

答案 2 :(得分:1)

var items = 0;
var online = usersOnline();
var itemsOnline = 0;
for ( var i = 0; i < nearest.length && items < 5; i++, items++ ) {
    var item = nearest[i];
    items++;
    if ( item.state != "offline" ) { itemsOnline++; }
    apendItem( item );
}
for ( var i = 5; i < nearest.length && itemsOnline < 1; i++ ) {
    var item = nearest[i];
    apendItem( item );
    break;
}