Question

我有一个内跨的div。他们有data-item attr。如何找到最大data-item attr的div。它们是从0开始的数字。例如，我有：

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

更新：这是我的代码的一部分，它是关于上传文件，其中一个输入字段是多个。我在一个div中显示文件的单独跨度图像名称。使用时应该添加多个文件，因此我需要找到最大的data-num并为下一个文件增加它。

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());
    } );
});

参考Fiddle

Answer 2

我认为此代码可以帮助您：

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用jQuery查找包含最大数据项的span

2 个答案: