更改网格视图中元素的顺序答案

【问题标题】：Change order of elements in grid view更改网格视图中元素的顺序
【发布时间】：2017-09-19 11:52:03
【问题描述】：

我需要使用 jQuery 更改网格中元素的顺序。

我有这样的事情：

<div class="products products-grid  ">

<div class="box product">
  <figure>
    <div class="image-table">
      <div class="image-cell">
        <a href="xxx" class="product-image" >
          <img src="xxx" alt="111">
        </a>
      </div>
    </div>
    <figcaption>
      <div class="product-title">
        <a href="xxx" class="title">111</a>
      </div>
      <span class="price">
        <span class="money">xxx</span>
      </span>
    </figcaption>
  </figure>
</div>


<div class="box product">
  <figure>
    <div class="image-table">
      <div class="image-cell">
        <a href="xxx" class="product-image" >
          <img src="xxx" alt="222">
        </a>
      </div>
    </div>
    <figcaption>
      <div class="product-title">
        <a href="xxx" class="title">222</a>

      </div>
      <span class="price">
        <span class="money">xxx</span>
      </span>
    </figcaption>
  </figure>
</div>

<div class="box product">
  <figure>
    <div class="image-table">
      <div class="image-cell">
        <a href="xxx" class="product-image" >
          <img src="xxx" alt="333">
        </a>
      </div>
    </div>
    <figcaption>
      <div class="product-title">
        <a href="xxx" class="title">333</a>

      </div>
      <span class="price">
        <span class="money">xxx</span>
      </span>
    </figcaption>
  </figure>
</div>

我需要通过 img src ... 中定义的 alt 更改“products products-grid”中元素的顺序。假设我有多个内部带有 alt = 222 的“盒子产品”，我希望它们成为“产品产品网格”中的第一个元素。我怎么能用 jQuery 做到这一点。

【问题讨论】：

为什么要使用alt 属性？它基本上是用于屏幕阅读器（或者如果图像无法显示）来显示文本。最好为此使用data 属性。你想什么时候改变它？在它改变之前必须发生什么？到目前为止，您尝试过什么？
您是否希望用户能够进行重新排序（即拖放或按钮操作重新排序）？或者您是在问如何在渲染之前操作 DOM？另外，发布您尝试过的内容。
回答这两个问题。这是我无法更改的现有代码。唯一能在代码中识别实体的是 alt 属性。我需要使用 jQuery 操作列表。我希望能够使用给定的“alt”对每个元素执行方法，以将其推送到“products products-grid”的顶部。

标签： javascript jquery

【解决方案1】：

你可以用 jQuery 轻松做到这一点

// With one item. Just grab it and throw it at the top
$('.products').prepend($('img[alt="222"]').closest('.product'));

多个，使用每个函数（可能）

$('img[alt="222"]').each(function(){
   $('.products').prepend($(this).closest('.product'));
});

此代码未经测试。语法可能有错误。

【讨论】：

【解决方案2】：

您可以使用这个 jquery 插件，它将对您完成所需的任务非常有用 http://tinysort.sjeiti.com

【讨论】：