Question

请参阅此codepen：http://codepen.io/muji/pen/XpEYzO

我需要定位第一个元素之后它已被css“order”属性排序，并为其提供另一个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

您可以按position().top对内部div进行排序，并在第一个上应用样式。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我不知道任何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>

Answer 3

@Nenad Vracar建议的位置顶部的替代方案是实际过滤每组中<ContentControl ContentTemplate="{StaticResource TopologyConfigurationInputTemplate}" Content="{Binding}" MinHeight="250"/>最小的元素并突出显示第一个（按照dom顺序 ））

＆＃13;
＆＃13;
order
＆＃13;
$('.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'); });
＆＃13;
.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; }
＆＃13;
＆＃13;
＆＃13;

如果您要根据媒体查询更改订单，则应在调整大小时应用此代码。

在CSS排序后定位第一个元素

3 个答案: