Question

我已使用以下代码将div附加到另一个div。附加的div具有一系列动态图像。我需要添加一个名为{{1}的类}，直到循环中的第一个active。

img

我只需要将第一次迭代更新为var items = []; jQuery.each(data, function(key, val) { jQuery('#imagenn').append('<div class="item"> <div class="col-xs-2"> <img src="' + val+ '" /> </div></div>'); });。

即预期输出

<div class="item active"

，依此类推。请帮助我做到这一点。谢谢。

Answer 1

尝试在循环后使用:first过滤器

var data = ['test', 'test', 'test'];

$.each(data, function(key, val) {
  $('#imagenn').append('<div class="item"> <div  class="col-xs-2"> <img src="' + val + '" />    </div></div>');
});

$('#imagenn .item:first').addClass('active')

.active {
  border: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="imagenn"></div>

Answer 2

如果active的值为img，只需将key类放入0。

这是代码。

var items = [];
jQuery.each(data, function(key, val) {
  let imageClass = key === 0 ? val : val += ' active';
  jQuery('#imagenn').append('<div class="item"> <div  class="col-xs-2"> <img src="' + val+ '" />    </div></div>'); 
});

只需要为jquery.each中的第一个元素添加活动类

2 个答案: