Question

如何按顺序打印数组具有相同的类名div。我尝试这个代码但它打印的是最后一个数组的相同值。有任何其他方法可以做到这一点

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script>
$(document).ready(function(e) {

    var sss = '5#45@41@25@65';
    var full = sss.split('#');

    var mainid = full[0];

    var full_sub = full[1].split('@');

    var sub_count = full_sub.length;

    alert(sub_count);

    for(var i=0;i<sub_count;i++)
    {
        $(".block").attr(data-id,full_sub[i]);
        $(".block").html(full_sub[i]);
    }


});
</script>


<div class="block" data-id="" ></div>
<div class="block" data-id="" ></div>
<div class="block" data-id="" ></div>
<div class="block" data-id="" ></div>

Answer 1

尝试

$(".block").each(function(index)
{
     $(this).attr("data-id",full_sub[index]);
      $(this).html(full_sub[index]);
 });

在您的代码中，每次使用类html()将.block分配给整个元素时。这里html()被分配给具有相同类名的每个标签。您也忘了将data-id放入""。否则它将把它作为变量，这会导致错误..

Answer 2

您当前的代码会在每次循环迭代中使用块类覆盖所有元素。相反，创建一个父元素并附加元素：

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script>
$(document).ready(function(e) {

    var sss = '5#45@41@25@65';
    var full = sss.split('#');

    var mainid = full[0];

    var full_sub = full[1].split('@');

    var sub_count = full_sub.length;

    alert(sub_count);
    var parent = document.querySelector('#parent');

    for(var i=0;i<sub_count;i++)
    {
        var div = document.createElement('div');
        div['data-id'] = full_sub[i];
        div.textContent = full_sub[i];
        parent.appendChild(div);
    }


});
</script>

<div id="parent"></div>

Working JSFiddle

Answer 3

如果你这样做，它将始终打印最后一个数组的相同值。

你应该使用JQuery 追加函数将块div附加到包装div中。

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script>  
  $(document).ready(function(e) {

    var sss = '5#45@41@25@65';
    var full = sss.split('#');

    var mainid = full[0];

    var full_sub = full[1].split('@');

    var sub_count = full_sub.length;

    alert(sub_count);

    for(var i=0;i<sub_count;i++)
    {
        $("#wrapBlock").append('<div class="block" data-id="'+ full_sub[i] +'">'+ full_sub[i] +'</div>');       
    }


    });
</script>


<div id="wrapBlock"></div>

这是我的解决方案，希望它有用！

Answer 4

试试这个。

<强> HTML

<div class="block" ></div>
<div class="block" ></div>
<div class="block" ></div>
<div class="block" ></div>

<强>脚本

var sss = '5#45@41@25@65',
    full = sss.split('#'),
    full_sub = full[1].split('@');

$('.block').each(function(index){
    $(this).attr('data-id', full_sub[index]);
    $(this).html(index+1);
});

Fiddle Demo

Answer 5

问题在于，当您致电$(".block").html(full_sub[i]);时，您正在使用课程.block设置所有div;通过循环，每次都会覆盖它们，一旦你离开循环，它们就被设置为最后一个值

Anoop的代码有效，另一种选择是

var blocks = $(".block");
for(var i=0;i<sub_count;i++)
{
    $(blocks[i]).attr('data-id',full_sub[i]);
    $(blocks[i]).html(full_sub[i]);
}

诀窍是你可以使用obj[intIndex]来获取jQuery集合中的每个项目，这样你就不会处理所有这些项目。

每个方法都是jQuery方式，它将遍历jQuery对象中的每个元素，并将其传递给索引，this将指向要迭代的元素

$(".block").each(function(index) {
     $(this).attr("data-id",full_sub[index]);
     $(this).html(full_sub[index]);
 });

如何按顺序打印数组有相同的类名div

5 个答案: