私はこのようになりますdivのリスト持つdivのリスト

Question

の真ん中にあるdivの決定：私は、リストの真ん中にあるdiv要素を決定する必要があり

<div class="item"></div> 
<div class="item"></div> 
<div class="item"></div> <!--the middle one--> 
<div class="item"></div> 
<div class="item"></div> 

を、そのDIVに注意してください数字は動的で、ユーザーの入力に依存します。私の最終的な目標は、どのdivが "middle div"の左右にあるのかを判断し、クラスを適用することはその位置に依存することです。

最終的な結果は次のようになります。

<div class="item left"></div> 
<div class="item left"></div> 
<div class="item center"></div> <!--the middle one--> 
<div class="item right"></div> 
<div class="item right"></div> 

私はそれぞれのdivの番号識別子を追加し、「ミドルDIV」を決定するために、中央値を使用するように考えていたが、私はかなりよく分かりません。

おそらく、この問題のために、javascript、jquery、または純粋なCSSを使用する方が良いでしょうか？

更新：偶数を処理するための

追加情報：

リストは、子のdivの数が偶数の場合には、それは両方、私の問題で、この

<div class="item left"></div> 
<div class="item left"></div> 
<div class="item left"></div> 
<div class="item right"></div> 
<div class="item right"></div> 
<div class="item right"></div> 

のようにそれを分割する必要がありますRory McCrossanとuser3297291はうまく動作します。私は、偶数を扱うために両方の変更を加えました。

（jQueryを使って）ロリーMcCrossanさん：

var $items = $('.item'); 
    var middleIndex = Math.floor($items.length/2); 
    var hasMid = $items.length % 2; 
    console.log(middleIndex); 

    if(hasMid == 1){ 
     $items.eq(middleIndex).addClass('middle') 
      .prevAll().addClass('left').end() 
      .nextAll().addClass('right'); 
    } 

    if(hasMid == 0){ 
     $items.eq(middleIndex).addClass('right') 
      .prevAll().addClass('left').end() 
      .nextAll().addClass('right'); 
    } 

user3297291さん：それは私の編集後に非常にきちんとしていないかもしれないよう

var setMidClasses = function (elementList, beforeMid, atMid, afterMid) { 
    var i = 0, 
     hasMid = elementList.length % 2, 
     mid = Math.floor(elementList.length/2); 

    while (i < mid) { 
     elementList[i].classList.add(beforeMid); 
     i += 1; 
    } 

    if (hasMid == 1) { 
     elementList[i].classList.add(atMid); 
     i += 1; 
    } 

    while (i < elementList.length) { 
     elementList[i].classList.add(afterMid); 
     i += 1; 
    } 

}; 



setMidClasses(document.querySelectorAll(".item"), 
    "left", "middle", "right"); 

コードスニペットを編集して自由に感じます。

Answer 1

奇数の項目の場合は、を使用して中間項目を取得できます。そこからは、関連する要素にクラスを追加するprevAll()とnextAll()を使用することができますjQueryのなし

var $items = $('.item'); 
 
var middleIndex = Math.floor($items.length/2); 
 

 
$items.eq(middleIndex).addClass('center') 
 
    .prevAll().addClass('left').end() 
 
    .nextAll().addClass('right');

.left { color: red; } 
 
.center { color: green; } 
 
.right { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item">1</div> 
 
<div class="item">2</div> 
 
<div class="item">3</div> <!--the middle one--> 
 
<div class="item">4</div> 
 
<div class="item">5</div>

Answer 2

：

（あなたも、番号付きリストを処理する方法に対応していません私はセンタークラスを省略し、2つの部分に分割することを選択しました：

var setMidClasses = function (elementList, beforeMid, atMid, afterMid) { 
 
    var i = 0, 
 
     hasMid = elementList.length % 2, 
 
     mid = Math.floor(elementList.length/2); 
 
    
 
    while (i < mid) { 
 
    elementList[i].classList.add(beforeMid); 
 
    i += 1; 
 
    } 
 
    
 
    if (hasMid) { 
 
    elementList[i].classList.add(atMid); 
 
    i += 1; 
 
    } 
 
    
 
    while (i < elementList.length) { 
 
    elementList[i].classList.add(afterMid); 
 
    i += 1; 
 
    } 
 
    
 
}; 
 

 

 

 
setMidClasses(document.querySelectorAll(".item"), 
 
       "top", "mid", "bottom");

.top { background-color: green; } 
 
.mid { background-color: orange; } 
 
.bottom { background-color: yellow; }

<div class="item">1</div> 
 
<div class="item">2</div> 
 
<div class="item">3</div> <!--the middle one--> 
 
<div class="item">4</div> 
 
<div class="item">5</div>

Answer 3

jQueryを使用しない場合も同様です。

var els = Array.from(document.querySelectorAll(".item")), 
 
    mid = ~~(els.length/2); 
 
els.forEach((e,i) => i < mid ? e.classList.add("left") 
 
          : i === mid ? e.classList.add("center") 
 
             : e.classList.add("right"));

.left {color: red} 
 
.center {color: green} 
 
.right {color: blue}

<div class="item">1</div> 
 
<div class="item">2</div> 
 
<div class="item">3</div> 
 
<div class="item">4</div> 
 
<div class="item">5</div>

Answer 4

ここで1次回（）/で再帰を使用したバージョンです。最後に（）

おそらくそれほど効率的ではなく、ループで行うこともできますが、再帰を伴うバージョンを表示したかったのです。

function fixthem() 
{ 
var divs = $("div:not(.right):not(.left)"); 
// Handle evens, either 2 in the middle: 
if (divs.length <= 2) return; 
// or none in the middle 
if (divs.length <= 1) return; 

divs.first().addClass("left"); 
divs.last().addClass("right"); 
fixthem(); 
} 
fixthem(); 

---

ここで（すなわち非常より効率的な）再帰と開始時にのみ、単一のjqueryの検索せずに同じです：

function fixthem() 
{ 
var divs = $("div"); 
// Use 1 for 1 or none in the middle (when even), 2 for 1(odd) or 2(even) 
while (divs.length > 2) 
{ 
    divs = divs.filter(":not(.right):not(.left)"); 
    if (divs.length <= 2) break; 

    divs.first().addClass("left"); 
    divs.last().addClass("right"); 
} 
} 
fixthem(); 

---

真ん中にクラスを追加するには、実行whileループの最後にある関数/の後：

$("div:not(.right):not(.left)").addClass("center") 

ワーキングフィドル：中心とhttps://jsfiddle.net/5huLjh5q/

：あなたは `.item`年代の偶数を持っている場合https://jsfiddle.net/5huLjh5q/1/

---

var divs = $("div"); 
 
// Use 1 for 1 or none in the middle (when even), 2 for 1(odd) or 2(even) 
 
while (divs.length > 2) 
 
{ 
 
    divs = divs.filter(":not(.right):not(.left)"); 
 
    if (divs.length <= 2) break; 
 

 
    divs.first().addClass("left"); 
 
    divs.last().addClass("right"); 
 
} 
 
divs.addClass("center");

div { display:inline; border:1px solid black; padding: 1em; margin-top:0.5em } 
 
.left { border:1px solid red;} 
 
.right { border:1px solid green;} 
 
.center { background: pink; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div> 
 
<div>5</div> 
 
<div>6</div> 
 
<div>7</div>