Sorting divs using jQuery – 2列,1列,2列等

huangapple go评论61阅读模式
英文:

Sorting divs using jQuery - 2 columns, 1 column, 2 columns etc

问题

我想使用 jQuery 对 div 进行排序。有一些带有 class col-sm-6 和 col-sm-12 的 div。

应该显示如下:

col-sm-6 col-sm-6
col-sm-12
col-sm-6 col-sm-6
col-sm-12
等等。

这些是 div:

<div class="row">
	<f:for each="{items}" as="data">
		<div class="col col-sm-{data.width}" data-width="{data.width}"></div>
	</f:for>
</div>

这是我目前的代码:

$('.col:not(.d-none)').sort(function(a, b) {
    return ???;
}).appendTo('.row');
英文:

I want to sort divs using jQuery. There are divs with class col-sm-6 and col-sm-12.

It should appear as follows:

col-sm-6 col-sm-6
col-sm-12
col-sm-6 col-sm-6
col-sm-12
etc.

these are the divs:

&lt;div class=&quot;row&quot;&gt;
	&lt;f:for each=&quot;{items}&quot; as=&quot;data&quot;&gt;
		&lt;div class=&quot;col col-sm-{data.width}&quot; data-width=&quot;{data.width}&quot;&gt;&lt;/div&gt;
	&lt;/f:for&gt;
&lt;/div&gt;	

and that's the code I have so far:

$(&#39;.col:not(.d-none)&#39;).sort( function(a,b) {
return ???;
}).appendTo(&#39;.row&#39;);

Does somebody has any idea?

答案1

得分: 0

以下是程序员建议的内容:

var elementIndex = 1;
$('.col').each(function(i, obj) {
    if (!$(obj).hasClass('d-none')) {
        if (elementIndex == 3) {
            $(obj).removeClass('col-sm-6');
            $(obj).addClass('col-sm-12');
            elementIndex = 1;
        } else {
            $(obj).removeClass('col-sm-12');
            $(obj).addClass('col-sm-6');
            elementIndex++;
        }
    }
});

这不是我想要的完全内容,但还可以。

英文:

This is what the programmer suggested to me:

	var elementIndex = 1;
	$(&#39;.col&#39;).each(function(i, obj) {
		if ( !$(obj).hasClass(&#39;d-none&#39;) ) {
			if ( elementIndex == 3 ) {
				$(obj).removeClass(&#39;col-sm-6&#39;);
				$(obj).addClass(&#39;col-sm-12&#39;);
				elementIndex = 1;
			} else {
				$(obj).removeClass(&#39;col-sm-12&#39;);
				$(obj).addClass(&#39;col-sm-6&#39;);
				elementIndex++;
			}
		}
	});

It's not exactly what i wanted, but ok.

huangapple
  • 本文由 发表于 2023年6月13日 16:48:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76463182.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定