グリッドビュー内の要素の順序を変更する

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で、 "製品の製品・グリッド" の要素の順序を変更する必要が

...：

私はこのような何かを持っています。私はalt = 222の中に複数の "box product"があり、それらを "products products-grid"の最初の要素にしたいとします。 jQueryを使ってどうすればいいですか？

出典

2017-04-22 blackadd3r

なぜあなたは 'alt'属性を使いたいですか？これは基本的にスクリーンリーダー（または画像を表示できない場合）の代わりにテキストを表示するためのものです。このために 'data'属性を使うほうが良いでしょう。いつあなたはそれを変更したいですか？それが変わる前に何が起こらなければならないのですか？これまでに何を試しましたか？ – lexith

ユーザーがリオーダを行うことができるようにしたいですか（ドラッグアンドドロップまたは並べ替えのためのボタン操作）ですか？または、レンダリングの前にDOMを操作する方法を尋ねていますか？また、あなたが試したことを投稿してください。 – jmargolisvt

両方の質問に答える。これは私が変更できない既存のコードです。コード内のエンティティを識別する唯一のことは、alt属性です。 jQueryを使ってリストを操作する必要があります。私は指定された 'alt'を持つすべての要素に対してメソッドを実行して、 'products products-grid'の先頭にそれをプッシュできるようにしたいと考えています。 – blackadd3r

を行うことに非常に有用であろうプラグインこのjqueryのを使用することができます）

$('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の

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

と、これはかなり簡単に行うことができ、あなたの必要なタスク http://tinysort.sjeiti.com

出典

2017-04-22 14:33:54 Osama

グリッドビュー内の要素の順序を変更する

答えて

関連する問題