如何按自定义属性的值对 DIV OnClick Jquery 进行排序？

发布于 2024-11-08 22:35:15 字数 531 浏览 0 评论 0原文

这段代码非常适合对动态创建的 div 进行排序：

<div id='1'>a</div>
<div id='2'>b</div>
<div id='3'>c</div>
<div id='4'>d</div>
<div id='5'>e</div>

<div id="addnew">Add New</div>



   $('#addnew').live('click',function() {

    newdiv = $("<div id='4'>AA</div>");

    div_id_after = Math.floor(parseFloat(newdiv.get(0).id));

    $('#'+div_id_after).after(newdiv);

});

我想要做的就是采用相同的函数并使其能够使用自定义属性“data-sort=”而不是 ID。

问候

原文

This code works perfect for sorting a dynamically created div:

<div id='1'>a</div>
<div id='2'>b</div>
<div id='3'>c</div>
<div id='4'>d</div>
<div id='5'>e</div>

<div id="addnew">Add New</div>



   $('#addnew').live('click',function() {

    newdiv = $("<div id='4'>AA</div>");

    div_id_after = Math.floor(parseFloat(newdiv.get(0).id));

    $('#'+div_id_after).after(newdiv);

});

All I want to do is take this same function and make it work to use a custom attribute "data-sort=" rather than ID.

Regards

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只有影子陪我不离不弃 2024-11-15 22:35:15

在您的元素中，您可以使用getAttribute()。

var elem = newdiv.get(0);

var div_id_after = elem.getAttribute('data-sort');

或者对于 jQuery，您可以使用 .data() 方法。

var div_id_after = newdiv.data('sort');

这是可行的，因为 jQuery 在旧版浏览器上也支持 HTML5 data 属性。

From your element, you can use getAttribute().

var elem = newdiv.get(0);

var div_id_after = elem.getAttribute('data-sort');

Or with jQuery, you can use the .data() method.

var div_id_after = newdiv.data('sort');

This works because jQuery supports the HTML5 data attributes on older browsers too.

回复收藏 0 原文

荭秂 2024-11-15 22:35:15

只需使用 newdiv.attr('data-sort') 访问 div 的自定义属性

更新：

事实上，如果您稍后想要迭代所有 div 元素并使用 'data-sort' 属性进行排序，使用 jQuery 您会做一些事情喜欢：

$("div.sortableDivClass").each(function(index, item) {
   var order = item.getAttribute('data-sort');
   // do the reshuffle based on the order
    ...


});

just use newdiv.attr('data-sort') to access custom attribute of your div

UPDATE:

Indeed if you later want to iterate over all div elements and use the 'data-sort' attribute for sorting, using jQuery you would do something like:

$("div.sortableDivClass").each(function(index, item) {
   var order = item.getAttribute('data-sort');
   // do the reshuffle based on the order
    ...


});

回复收藏 0 原文

~没有更多了~