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

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

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

问题

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

应该显示如下：

  1. col-sm-6 col-sm-6
  2. col-sm-12
  3. col-sm-6 col-sm-6
  4. col-sm-12
  5. 等等。

这些是 div：

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

这是我目前的代码：

  1. $('.col:not(.d-none)').sort(function(a, b) {
  2.     return ???;
  3. }).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:

  1. col-sm-6 col-sm-6
  2. col-sm-12
  3. col-sm-6 col-sm-6
  4. col-sm-12
  5. etc.

these are the divs:

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

and that's the code I have so far:

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

Does somebody has any idea?

答案1

得分: 0

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

  1. var elementIndex = 1;
  2. $('.col').each(function(i, obj) {
  3.     if (!$(obj).hasClass('d-none')) {
  4.         if (elementIndex == 3) {
  5.             $(obj).removeClass('col-sm-6');
  6.             $(obj).addClass('col-sm-12');
  7.             elementIndex = 1;
  8.         } else {
  9.             $(obj).removeClass('col-sm-12');
  10.             $(obj).addClass('col-sm-6');
  11.             elementIndex++;
  12.         }
  13.     }
  14. });

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

英文:

This is what the programmer suggested to me:

  1. 	var elementIndex = 1;
  2. 	$(&#39;.col&#39;).each(function(i, obj) {
  3. 		if ( !$(obj).hasClass(&#39;d-none&#39;) ) {
  4. 			if ( elementIndex == 3 ) {
  5. 				$(obj).removeClass(&#39;col-sm-6&#39;);
  6. 				$(obj).addClass(&#39;col-sm-12&#39;);
  7. 				elementIndex = 1;
  8. 			} else {
  9. 				$(obj).removeClass(&#39;col-sm-12&#39;);
  10. 				$(obj).addClass(&#39;col-sm-6&#39;);
  11. 				elementIndex++;
  12. 			}
  13. 		}
  14. 	});

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

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

发表评论

匿名网友

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

确定