Определите DIV находится в середине списка сНа

Question

У меня есть список Див, который выглядит следующим образом:

<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 число динамическое, зависит от ввода пользователя. моя конечная цель - определить, какие divs находятся слева и справа от «среднего 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?

Update:

Дополнительная информация для обработки даже номер:

в случае, если список имеет четное число детей дивы, она должна делить его как этот

<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> 

в моей проблеме, как Рори Маккроссан и пользователь3297291 хорошо работают. Я добавил некоторые изменения в оба из них для обработки четных чисел.

Рори McCrossan-х (с JQuery):

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

В случае нечетного количества предметов вы можете получить средний предмет, используя Math.floor(items.length/2). Оттуда вы можете использовать prevAll() и nextAll() для добавления классов к соответствующим элементам:

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

Без JQuery:

(Вы не ответили, как обращаться даже пронумерованные списки Я выбрал опустить класс центра и разделить на две части: до и после середины)

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

Вот версия, которая использует рекурсию с .Первый() /.last()

, вероятно, не очень эффективный и может быть выполнен с помощью цикла, но я хотел показать версию с рекурсией.

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/

С центра: 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>