如何使用jQuery查找具有最大数据项的span
How to find span with biggest data-item using jQuery
我有一个div,里面有span。有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>
Updated:这是我代码的一部分,它是关于上传文件和其中一个输入字段是多个。我在一个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>
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
我认为这段代码可以帮助你:
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>
相关文章:
- 使用Clipboard.js复制span文本
- 将<span样式>凯迪托
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- 当DIV中的文本高亮显示时,如何获得DIV中Span的值?(Javascript)
- 使用Javascript从整个网页中删除具有特定类的所有span标记
- Javascript/jQuery:用HTML span标记替换单引号中的文本
- 使用Javascript更改Nested Span类
- 用类javascript包装span标记中字符串中的字符索引
- 全局屏幕span onclick触发一个事件javascript
- jQuery将文本从span标记复制到另一个span标记
- 排序<李><Ul>根据<span>内部<李>
- '对于'循环,替换span标记的问题
- 如何隐藏空<span>在IE中使用javascript.(注意,在其他浏览器中工作正常)
- 使用jquery将单个换行符替换为span元素
- 使用JS将页面中的每个字母设置为随机颜色.为什么在页面的每个打开标记之前总是有一组额外的span标记
- 当我想在span标记中呈现文本时,看到span标记
- 如何选择span标记内的所有内容,包括span标记本身
- 点击功能在<span>
- 使用jquery过滤逗号分隔的span文本
- 如何使用jQuery查找具有最大数据项的span