Javascript 将每个div放入数组中，然后将它们连接到html替代项_Javascript_Jquery

Javascript 将每个div放入数组中，然后将它们连接到html替代项

javascript jquery

Javascript 将每个div放入数组中，然后将它们连接到html替代项,javascript,jquery,Javascript,Jquery,我有一段代码，它循环遍历一个数组，然后将每个div推送到一个数组中。稍后，它将加入html。这一个的问题是，每个部门都会相互隶属，但我希望它们都是分开的。示例：每个名为cf skin的类都位于其他cf skin下，但我希望它们都位于cf creator皮肤上。如果你想知道我是如何得到我想要的，那么我使用了append，但实际上我不能使用它，因为我有一个按钮下的JS代码，如果我再次单击它，它将再次追加，所有的东西都会出现两次。这是我的JS代码。我希望这是可以理解的 var data = findG

我有一段代码，它循环遍历一个数组，然后将每个div推送到一个数组中。稍后，它将加入html。这一个的问题是，每个部门都会相互隶属，但我希望它们都是分开的。示例：每个名为cf skin的类都位于其他cf skin下，但我希望它们都位于cf creator皮肤上。如果你想知道我是如何得到我想要的，那么我使用了append，但实际上我不能使用它，因为我有一个按钮下的JS代码，如果我再次单击它，它将再次追加，所有的东西都会出现两次。这是我的JS代码。我希望这是可以理解的

var data = findGame(id);
var skins_creator = [];
var skins_opponent = [];
$('.watch-cf .modal-header h3').html('Watch Coinflip | #' + id);
$('.modal-body #creator-name').html(data.creator[0].name);
$('.modal-body #hash').html(data.hash);
$('.modal-body .duel-user-img').attr('src', 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/1a/1a1b22711e4a3d5cededed01b24386ca6d181af4_full.jpg');
$('.modal-body #cf-creator-val').html(data.creator[0].totalSkins + ' skins valued at $' + data.creator[0].totalAmount);
data.creator[0].items.forEach(function (kevin){
    skins_creator.push('<div class="cf-skin" style="box-shadow: inset 0 0 20px #'+kevin.color+'"> <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/'+kevin.classid+'/111fx57f"></div><div class="cf-skin-name">'+kevin.name+'<p>'+kevin.price+' USD</p></div>');
});
$('.modal-body .cf-creator-skins').html(skins_creator.join(""));
$('.watch-cf').modal('show');

目前情况如何

<div class="cf-creator-skins">
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1611092744/111fx57f"></div>
        <div class="cf-skin-name">AWP | Lightning Strike (Factory New)
            <p>62.32 USD</p>
        </div>
        <div class="cf-skin" style="box-shadow: inset 0 0 20px #eb4b4b">
            <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/312020315/111fx57f"></div>
            <div class="cf-skin-name">★ Flip Knife | Safari Mesh (Battle-Scarred)
                <p>51.7 USD</p>
            </div>
            <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
                <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1815976823/111fx57f"></div>
                <div class="cf-skin-name">M4A1-S | Mecha Industries (Well-Worn)
                    <p>21.56 USD</p>
                </div>
                <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
                    <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/469585294/111fx57f"></div>
                    <div class="cf-skin-name">AK-47 | Vulcan (Well-Worn)
                        <p>21.46 USD</p>
                    </div>
                    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
                        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1011942928/111fx57f"></div>
                        <div class="cf-skin-name">AWP | Hyper Beast (Well-Worn)
                            <p>21.41 USD</p>
                        </div>
                        <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
                            <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1011942928/111fx57f"></div>
                            <div class="cf-skin-name">AWP | Hyper Beast (Well-Worn)
                                <p>21.41 USD</p>
                            </div>
                            <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
                                <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1812959668/111fx57f"></div>
                                <div class="cf-skin-name">M4A4 | Desolate Space (Minimal Wear)
                                    <p>18.16 USD</p>
                                </div>
                                <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
                                    <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1440505236/111fx57f"></div>
                                    <div class="cf-skin-name">AK-47 | Point Disarray (Minimal Wear)
                                        <p>17.82 USD</p>
                                    </div>
                                    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
                                        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/520030583/111fx57f"></div>
                                        <div class="cf-skin-name">M4A1-S | Cyrex (Factory New)
                                            <p>16.24 USD</p>
                                        </div>
                                        <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
                                            <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1800001386/111fx57f"></div>
                                            <div class="cf-skin-name">AWP | Electric Hive (Minimal Wear)
                                                <p>14.82 USD</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这就是我想要的

<div class="cf-creator-skins">
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1611092744/111fx57f"></div>
        <div class="cf-skin-name">AWP | Lightning Strike (Factory New)
            <p>62.32 USD</p>
        </div>
    </div>
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #eb4b4b">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/312020315/111fx57f"></div>
        <div class="cf-skin-name">★ Flip Knife | Safari Mesh (Battle-Scarred)
            <p>51.7 USD</p>
        </div>
    </div>
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1815976823/111fx57f"></div>
        <div class="cf-skin-name">M4A1-S | Mecha Industries (Well-Worn)
            <p>21.56 USD</p>
        </div>
    </div>
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/469585294/111fx57f"></div>
        <div class="cf-skin-name">AK-47 | Vulcan (Well-Worn)
            <p>21.46 USD</p>
        </div>
    </div>
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1011942928/111fx57f"></div>
        <div class="cf-skin-name">AWP | Hyper Beast (Well-Worn)
            <p>21.41 USD</p>
        </div>
    </div>
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1011942928/111fx57f"></div>
        <div class="cf-skin-name">AWP | Hyper Beast (Well-Worn)
            <p>21.41 USD</p>
        </div>
    </div>
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1812959668/111fx57f"></div>
        <div class="cf-skin-name">M4A4 | Desolate Space (Minimal Wear)
            <p>18.16 USD</p>
        </div>
    </div>
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1440505236/111fx57f"></div>
        <div class="cf-skin-name">AK-47 | Point Disarray (Minimal Wear)
            <p>17.82 USD</p>
        </div>
    </div>
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/520030583/111fx57f"></div>
        <div class="cf-skin-name">M4A1-S | Cyrex (Factory New)
            <p>16.24 USD</p>
        </div>
    </div>
    <div class="cf-skin" style="box-shadow: inset 0 0 20px #undefined">
        <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1800001386/111fx57f"></div>
        <div class="cf-skin-name">AWP | Electric Hive (Minimal Wear)
            <p>14.82 USD</p>
        </div>
    </div>
</div>

我猜你错过了最后一节

data.creator[0].items.forEach(function (kevin){
    skins_creator.push('<div class="cf-skin" style="box-shadow: inset 0 0 20px #'+kevin.color+'"> <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/'+kevin.classid+'/111fx57f"></div><div class="cf-skin-name">'+kevin.name+'<p>'+kevin.price+' USD</p></div></div>');
});

在skins_creator.push中尝试一下这个

你错过了一个收尾

你的代码错过了一个收尾div，在这行的末尾谢谢你，我记得当我第一次尝试它时，它不起作用，它显示了我的错误，我觉得我有一个收尾div太多了lol。。。