时间戳

首页 > 解决方案 > 将 div 包装到 javascript 输出

javascript - 将 div 包装到 javascript 输出

问题描述

基本上我需要做的是包装这个代码输出

<a id="show_selected">Click to Show</a>
<div id="selected"></div>

<script type="text/javascript">
    function showSelect(){
        $("#show_selected").bind("click", function (e) {
            e.preventDefault();
            $('#selected').text($("#fvip").mapster("get"));
        });
    }
    showSelect();
</script>

现在很简单

<div id="selected">001,002,003,004</div>

成为

<div="selected">
   <div class="something">001</div> 
   <div class="something">002</div> 
   <div class="something">003</div> 
   <div class="something">004</div>
</div>

我怎样才能做到这一点？那可能吗？非常感谢

在 brk 的帮助下进行编辑：

我尝试将它合并到我的代码中，如下所示：

    function showSelect(){
        $("#show_selected").bind("click", function (e) {
        e.preventDefault();
        $('#selected').text($("#fvip").mapster("get"));
            let wrapContainer = ""
            let stringArray = $("#selected").text().trim().split(' ');
            $("#selected").empty()
            stringArray.forEach(function(item, index) {
            let wrapContainer = $('<div class="test">' + item + '</div>');
            $("#selected").append(wrapContainer)
            });
        });
    }
    showSelect();

但我得到的是：

<div id="selected">
    <div class="test">001,002,003,004</div>
</div>

我在哪里做错了？

标签： javascript

解决方案

您可以获取文本并将其拆分。然后循环并将其放入 div 中。然后将 div 附加到父元素

let wrapContainer = ""
let stringArray = $("#original").text().trim().split(' ');
$("#original").empty()
stringArray.forEach(function(item, index) {
  let wrapContainer = $('<div class="test">' + item + '</div>');
  $("#original").append(wrapContainer)
});
.test {
  color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="original">001 002 003 004</div>

推荐阅读