Wie finde ich den Bereich mit dem größten Datenelement mit jQuery

Question

Ich habe ein div mit Spannen innerhalb. Sie haben data-item attr. So finden Sie div mit dem größten data-item attr. Sie sind Zahlen von 0. Beispiel ausgehend habe ich:

<div class="wrapper"> 
 
    <span data-num="0">text</span> 
 
    <span data-num="1">text</span> 
 
    <span data-num="2">text</span> 
 
    <span data-num="3">text</span> 
 
</div>

Aktualisiert: Dieser Teil meines Codes ist, es geht um das Hochladen von Dateien und eines der Eingabefelder ist vielfältig. Und ich zeige in einem Div mit separaten Spannen Bildnamen der Dateien. Verwenden Sie sollten mehrere Dateien hinzufügen, so dass ich die größte data-num finden und für die nächste Datei erhöhen muss.

function getFiles(document, window, index) { 
 
    var inputs = document.querySelectorAll('.app-file'); 
 
    input.addEventListener('change', function(e) 
 
    { 
 
    var fileName = ''; 
 
    var num = 0; 
 
    
 
    if(this.files && this.files.length > 1 || $(this).next().next().html()) { 
 
        var fileName = []; 
 

 
        for (var i = 0; i < this.files.length; ++i) { 
 
         fileName.push(this.files.item(i).name); 
 
         var comma = ''; 
 
         if($(this).next().next().html()) { 
 
          comma = ','; 
 
         } 
 

 
         divName.innerHTML = divName.innerHTML + comma + '<span class="image_name" data-num="'+num+'">' + this.files.item(i).name + '</span><span class="glyphicon glyphicon-remove remove-file" data-toggle="tooltip" data-placement="top" title="Remove"></span>'; 
 
         num++; 
 
        } 
 
       } else { 
 
        fileName = e.target.value.split('\\').pop(); 
 
        divName.innerHTML = '<span class="image_wrapper"><span class="image_name" data-num="'+num+'">' +fileName + '</span><span class="glyphicon glyphicon-remove remove-file" data-toggle="tooltip" data-placement="top" title="Remove"></span></span>'; 
 
        var maxIndexItem = $.makeArray($('#wrapper [data-num]')).reduce(function(result, item) { 
 
         return $(item).data('num') > $(result).data('num') ? $(item) : result; 
 
        }); 
 
        alert(maxIndexItem.text()); 
 
       } 
 
    }); 
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <div class="file-name" data-input="corporate_document" id="corporates"></div>

Answer 1

HTML

<div class="wrapper"> 
    <span data-num="0">text1</span> 
    <span data-num="1">text2</span> 
    <span data-num="2">text3</span> 
    <span data-num="3">text4</span> 
    <span>text5</span> 
    <span data-num="">text6</span> 
</div> 

JS

$(document).ready(function(){ 
    var arr = []; 
     $(".wrapper span").each(function(){ 
     var dataNum = $(this).data("num"); 
     if (dataNum != null) { 
      arr.push(dataNum); 
     } 
    }).promise().done(function(){ 
     var max = Math.max.apply(Math, arr); 
    alert($(".wrapper").find("[data-num=" + max + "]").text()); 
    }); 
}); 

Siehe Fiddle

Answer 2

denke ich, dieser Code kann hilft Ihnen:

var maxIndexItem = $.makeArray($('.wrapper [data-num]')).reduce(function(result, item) { 
 
    return $(item).data('num') > $(result).data('num') ? $(item) : result; 
 
}); 
 

 
alert(maxIndexItem.text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <span data-num="0">text 0</span> 
 
    <span data-num="1">text 1</span> 
 
    <span data-num="2">text 2</span> 
 
    <span data-num="3">text 3</span> 
 
</div>