Ориентация первого элемента после CSS упорядочения

Question

Пожалуйста, ознакомьтесь codepen: http://codepen.io/muji/pen/XpEYzO

мне нужно предназначаться первым элементом после он был отсортирован по КАСУ собственности «порядок» и дать ему другое свойство CSS.

Есть ли какой-нибудь jQuery или что-то, что я могу использовать, чтобы найти первый элемент после сортировки, а затем addClass или что-то еще? Большое спасибо за любую помощь

.wrap { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.featured { 
 
    order: 1; 
 
} 
 
.normal { 
 
    order: 2; 
 
} 
 
.wrap div { 
 
    flex-basis: 50%; 
 
    background: #ddd; 
 
    border: 2px solid #000; 
 
} 
 

 
/*this is the part I need help with, as it should only apply to the first element AFTER applying the "order" attribute*/ 
 
.wrap div:first-of-type { 
 
    flex-basis: 100%; 
 
    background: #f00; 
 
}

<h3>wp_query 1 output:</h3> 
 
<div class="wrap"> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="featured">A featured item</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="featured">A featured item</div> 
 
    <div class="normal">Normal</div> 
 
</div> 
 

 
<h3>wp_query 2 output:</h3> 
 
<div class="wrap"> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
</div>

Answer 1

Альтернативой в верхней позиции, предложенной @Nenad Врачар бы на самом деле отфильтровать элементы с наименьшим order в каждой группе и выделить первый (с точки зрения порядка йот)

$('.wrap').each(function() { 
 
    var items = $(this).children(), 
 
    minOrder = Infinity, 
 
    details = items.map(function(i, el) { 
 
     var order = +$(el).css('order'); 
 
     if (minOrder > order) minOrder = order; 
 
     return { 
 
     element: el, 
 
     order: order 
 
     }; 
 
    }).get(), 
 
    firstElement = details.filter(function(item) { 
 
     return item.order == minOrder; 
 
    })[0]; 
 
    
 
    $(firstElement.element) 
 
    .addClass('highlight') 
 
    .siblings() 
 
    .removeClass('highlight'); 
 
    
 
});

.wrap { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.featured { 
 
    order: 1; 
 
} 
 
.normal { 
 
    order: 2; 
 
} 
 
.wrap div { 
 
    flex-basis: 50%; 
 
    background: #ddd; 
 
    border: 2px solid #000; 
 
} 
 
/*this is the part I need help with, as it should only apply to the first element AFTER applying the "order" attribute*/ 
 

 
.wrap .highlight { 
 
    flex-basis: 100%; 
 
    background: #f00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h3>wp_query 1 output:</h3> 
 
<div class="wrap"> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="featured">A featured item</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="featured">A featured item</div> 
 
    <div class="normal">Normal</div> 
 
</div> 
 

 
<h3>wp_query 2 output:</h3> 
 
<div class="wrap"> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
</div>

---

Если вы хотите изменить заказ на основе медиа-запросов, вы должны применить этот код при изменении размера.

Answer 2

Вы можете сортировать внутренние дивы по position().top и применить стиль на первый.

$('.wrap').each(function() { 
 
    var sort = $(this).find('div').sort(function(a, b) { 
 
    return $(a).position().top - $(b).position().top 
 
    }) 
 
    $(sort[0]).addClass('first') 
 
})

.wrap { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.featured { 
 
    order: 1; 
 
} 
 
.normal { 
 
    order: 2; 
 
} 
 
.wrap div { 
 
    flex-basis: 50%; 
 
    background: #ddd; 
 
    border: 2px solid #000; 
 
} 
 
div.first { 
 
    flex-basis: 100%; 
 
    background: #f00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>wp_query 1 output:</h3> 
 
<div class="wrap"> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="featured">A featured item</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="featured">A featured item</div> 
 
    <div class="normal">Normal</div> 
 
</div> 
 

 
<h3>wp_query 2 output:</h3> 
 
<div class="wrap"> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
</div>

Answer 3

Я не знаю ни CSS selector для «первого в порядке» или тому подобное (что бы быть удобно, так как order становится все более широко принят), так что это, вероятно, должен быть решением на основе скриптов (к сожалению).

Вы бы указали, что решение, связанное с , переупорядочивает элементы могут работать для вас. Если это так, это легко. :-) Посмотреть комментарии:

// A worker function to tell us the priority of an element (low number = high priority) 
 
function getPriority($el) { 
 
    return $el.hasClass("featured") ? 0 : $el.hasClass("normal") ? 1 : 2; 
 
} 
 
// For each .wrap container... 
 
$(".wrap").each(function() { 
 
    var $this = $(this); 
 
    
 
    // Get an array of its child elements 
 
    var a = $this.children().get(); 
 
    
 
    // Sort it, putting featured first, then normal, then any others 
 
    a.sort(function(a, b) { 
 
    return getPriority($(a)) - getPriority($(b)); 
 
    }); 
 
    
 
    // Append them to the parent, which moves them 
 
    $this.append(a); 
 
});

.wrap { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.wrap div { 
 
    flex-basis: 50%; 
 
    background: #ddd; 
 
    border: 2px solid #000; 
 
} 
 

 
/* Just make the first div the highlighted one */ 
 
.wrap div:first-of-type { 
 
    flex-basis: 100%; 
 
    background: #f00; 
 
}

<h3>wp_query 1 output:</h3> 
 
<div class="wrap"> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="featured">A featured item</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="featured">A featured item</div> 
 
    <div class="normal">Normal</div> 
 
</div> 
 

 
<h3>wp_query 2 output:</h3> 
 
<div class="wrap"> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
    <div class="normal">Normal</div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>