在網格視圖中更改元素的順序

我有這樣的事情：

<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 ...。可以說我有多個「盒子產品」，裏面有alt = 222，我希望它們成爲「產品網格」中的第一個元素。我怎麼能使用jQuery來做到這一點。

來源

2017-04-22 blackadd3r

你爲什麼要使用'alt'屬性？它基本上是屏幕閱讀器（或者如果圖像不能顯示）來顯示文本。爲此，最好使用'data'屬性。你什麼時候想改變它？它發生變化之前必須發生什麼？你試過什麼了？ – lexith

您是否希望用戶能夠進行重新編碼（即拖放或按鈕操作以重新排序）？或者你問在渲染之前如何操縱DOM？另外，發佈你試過的東西。 – jmargolisvt

回答這兩個問題。這是我無法改變的現有代碼。在代碼中唯一標識實體的是alt屬性。我需要使用jQuery來操縱列表。我希望能夠在給定'alt'的每個元素上執行方法，以將其推到'products products-grid'的頂部。 – blackadd3r

你可以做到這一點相當的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')); 
});

此代碼未經測試。語法可能有錯誤。

來源

2017-04-22 14:47:36 Noobit

我應該如何看待這個例子？ https://jsfiddle.net/x6o0h1jd/ – blackadd3r

編輯你的jsfiddle：https：//jsfiddle.net/x6o0h1jd/7/ – Noobit

你可以使用這個jQuery插件這將是對你非常有用做你需要的任務 http://tinysort.sjeiti.com

來源

2017-04-22 14:33:54 Osama

在網格視圖中更改元素的順序

回答

相關問題