1

我使用jQuery sortable库创建了可排序的项目列表。jQuery排序的自定义索引

HTML:

<ul id="sortable"> 
    <li id="item1" data-index="1">Item 1</li> 
    <li id="item2" data-index="2">Item 2</li> 
    <li id="item3" data-index="3">Item 3</li> 
    <li id="item4" data-index="4">Item 4</li> 
    <li id="item5" data-index="5">Item 5</li> 
</ul> 

JS:

(function($) { 
    $('#sortable').sortable({ 
     stop: function(e, ui) { 
      console.log(ui.item.index()); // Returns 0,1,2 etc 
     } 
    }); 
})(jQuery); 

如何使用属性标记的lidata-index为自定义指标?

应该打印自定义index值,而不是自己的index值即0,1,2

回答

1

Working fiddle

你可以使用下面$(ui.item).data('index')检查例如:

(function($) { 
    $('#sortable').sortable({ 
    stop: function(e, ui) { 
     console.log($(ui.item).data('index')); // Returns 0,1,2 etc 
    } 
    }); 
})(jQuery); 

希望这有助于。


(function($) { 
 
    $('#sortable').sortable({ 
 
    stop: function(e, ui) { 
 
     alert($(ui.item).data('index')); // Returns 0,1,2 etc 
 
    } 
 
    }); 
 
})(jQuery);
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
 
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; } 
 
#sortable li span { position: absolute; margin-left: -1.3em; } 
 
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
<link href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" rel="stylesheet"/> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script> 
 

 
<ul id="sortable"> 
 
    <li id="item1" data-index="111">Item 1</li> 
 
    <li id="item2" data-index="222">Item 2</li> 
 
    <li id="item3" data-index="333">Item 3</li> 
 
    <li id="item4" data-index="444">Item 4</li> 
 
    <li id="item5" data-index="555">Item 5</li> 
 
</ul>

+0

入住这里http://jsfiddle.net/HgDZ9/333/。它为特定项目返回索引值0,1,2等。我需要的是每个项目的索引值,例如Item1-4(索引),Item2-6(索引),Item3-9(索引)等等。当我用Item 2对项目1进行排序时,它应该像这样返回。项目2-4(索引)和项目1-6(索引)。是否有可能实现? –