divの1つに動的に表示される1つのクラスに基づく並べ替え

Question

フレックスコンテナにdivを注文するときに問題があります。 私が挑戦しているのは、7つのレシピのうちどれが「拡張された」クラスであるかに基づいてレシピの順番を変更することです。

レシピをクリックすると、制限されたサイズ（250px）から100%までの幅になります。そして、私は1と1行レシピ例えば1つの、拡張レシピを崩壊し、2つのレシピ付きの行を持つ避けたい：

ここに私のHTMLです（.recipesがフレックスコンテナです）拡大第七のレシピで：

<section class="recipes"> 
    <div class="recipe collapsed" id="recipe1"> 
    <div class="recipe collapsed" id="recipe2"> 
    <div class="recipe collapsed" id="recipe3"> 
    <div class="recipe collapsed" id="recipe4"> 
    <div class="recipe collapsed" id="recipe5"> 
    <div class="recipe collapsed" id="recipe6"> 
    <div class="recipe expanded" id="recipe7"> 
</section> 

私は様々な選択を注文しましたが、私が期待したものではありませんでした。

#recipe1.collapsed { order: 1; } 
#recipe2.collapsed { order: 2; } 
#recipe3.collapsed { order: 3; } 
#recipe4.collapsed { order: 4; } 
#recipe5.collapsed { order: 5; } 
#recipe6.collapsed { order: 6; } 
#recipe7.collapsed { order: 7; } 

私のHTMLを動的に更新されているので（一つだけ拡大レシピ：ページのトップに私の拡大のレシピを持っ を、次のいずれかの完璧ではないひどいではなくなる、（理由を正確ところで知りません）一度に：2番目のものが展開されている場合、最初のものがJSで折りたたまれています）、6つの折りたたまれたレシピ+次のように展開されたレシピを注文する方法はありますか？

#recipe1.collapsed { order: 1; } 
#recipe2.collapsed { order: 2; } 
#recipe3.collapsed { order: 4; } 
#recipe4.expanded { order: 3; } 
#recipe5.collapsed { order: 5; } 
#recipe6.collapsed { order: 6; } 
#recipe7.collapsed { order: 7; } 

別のレシピが展開されている場合は、私は別の順序を設定したい：#recipe4が展開されている場合

は、私は次の順序をしたいですか？

Answer 1

あなたは3つの要素の行を持っている場合は、あなたが線で物事ラインを並べ替えるために、各グループ間でのギャップを生きて、3のグループで注文を設定する必要があります。tabindexで

例ので、divが:focus

をキャッチすることができます

.recipes { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
.recipe { 
 
    width:30vw; 
 
    height:50px; 
 
    margin:0.5vw; 
 
    border:solid; 
 
    box-sizing:border-box; 
 
} 
 
.recipe:focus { 
 
    width:92vw; 
 
    color:red 
 
} 
 
div:focus:nth-child(2),div:focus:nth-child(3) { 
 
    order:1!important/* important used to overwrite selector with #recipeX mind it while using this for yourself. get rid of !important by increasing selector specifity */ 
 
} 
 
div:focus:nth-child(5),div:focus:nth-child(6) { 
 
    order:6!important/* important used to overwrite selector with #recipeX mind it while using this for yourself. get rid of !important by increasing selector specifity */ 
 
} 
 
/*these divs can have order assigned via nth-child() instead ID (could be created via loop within a script)*/ 
 
#recipe1 { order: 3; } 
 
#recipe2 { order: 4; } 
 
#recipe3 { order: 5; } 
 
#recipe4 { order: 9; } 
 
#recipe5 { order: 10; } 
 
#recipe6 { order: 11; } 
 
#recipe7 { order: 15; } 
 

 
/* demo purpose*/ 
 
section {counter-reset:divs} 
 
section div {counter-increment:divs;display:flex;align-items:center;justify-content:center;} 
 
section div:before {content:counter(divs)}

<section class="recipes"> 
 
    <div class="recipe collapsed" id="recipe1" tabindex="0"></div> 
 
    <div class="recipe collapsed" id="recipe2" tabindex="0"></div> 
 
    <div class="recipe collapsed" id="recipe3" tabindex="0"></div> 
 
    <div class="recipe collapsed" id="recipe4" tabindex="0"></div> 
 
    <div class="recipe collapsed" id="recipe5" tabindex="0"></div> 
 
    <div class="recipe collapsed" id="recipe6" tabindex="0"></div> 
 
    <div class="recipe expanded" id="recipe7" tabindex="0"></div> 
 
</section>

https://codepen.io/gc-nomade/pen/eEgZyB

Answer 2

簡単なJavaScriptコードでこれを行うことができます：

var items = document.querySelectorAll(".recipe"); // get all recipes 
items.forEach(function(item) { 
    item.onclick = function() { // add onClick event 
     var item_index = Array.prototype.indexOf.call(items, item); // find the index of the item which is clicked 

     // Add 1 to (index+1) until it reaches the clicked item 
     var plus = 1; 
     items.forEach(function(item,index) { 
      if (index == item_index) 
       plus = 0; 
      item.style.order = index+1+plus; 
     }); 

     // set the order of clicked item to 1 
     this.style.order = 1; 
    } 
});