Question

我可能知道为什么我为div.box复制更多不同的数据类型，即data-type =“c1”和data-type =“c2”，所有div将运行相同的内容数据=类型= “C1”？

html :
// Should be 
<div class="box" data-type="c1" id="cp_1">
    <div class="cp-title">c1 title</div>
</div>
<div class="box" data-type="c2" id="cp_2">
    <div class="cp-title">c2 title</div>
</div>

我想像上面的样本一样输出，当data-type = c2时，内容应该是c2-title。但目前它使用data-type = c1运行相同的内容，如下面的示例所示。

// currently
<div class="box" data-type="c1" id="cp_1">
    <div class="cp-title">c1 title</div>
</div>
<div class="box" data-type="c2" id="cp_2">
    <div class="cp-title">c1 title</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(function() {
// document
    'use strict';

    var cp = $('div.box');
    // unique id
    var idCp = 0;
    for (var i = 0; i < cp.length; i++) {
      idCp++;
      cp[i].id = "cp_" + idCp;
    }

    // diffrent type
    if (cp.data('type') == "c1") 
    {
        cp.addClass('red').css(
            {
                "background: 'red',
                "padding": "20px", 
                "display": "table"}
            );
        $('.box').append('<div class="cp-title">'+ 'c1-title' + '</div>');
    } 

    else if (cp.data('type') == "c2") 
    {
        cp.addClass('green').css(
            {
                "background" : 'green',
                "padding": "20px", 
                "display": "table"}
            );
        $('.box').append('<div class="cp-title">'+ 'c2-title' + '</div>');
    } else {
        return false;
    }
});//end

Answer 1

请使用$(xx).each来迭代元素集合var cp = $('div.box')。

参考：https://api.jquery.com/each/

请注意第二个参数是DOM元素，你需要通过包装器$(this)使其成为jquery元素

循环不起作用

1 个答案: