通过数据对象进行Javascript dom操作

我有这样的HTML

<div class="fruits">[ Banana Apple Orange Melon Papaya ][ Avocado Coconut Strawberry ]</div>

<div class="fruits">
<p id="pid_0" data-show="wid_0">
    <span id="wid_0" data-price="100" data-code="1">Banana</span>
    <span id="wid_1" data-price="200" data-code="2">Apple</span>
    <span id="wid_2" data-price="300" data-code="3">Orange</span>
    <span id="wid_3" data-price="400" data-code="4">Melon</span>
    <span id="wid_4" data-price="500" data-code="5">Papaya</span>
</p>
<p id="pid_5" data-show="wid_5">
    <span id="wid_5" data-price="600" data-code="6">Avocado</span>
    <span id="wid_6" data-price="700" data-code="7">Coconut</span>
    <span id="wid_7" data-price="800" data-code="8">Strawberry</span>
</p>

[香蕉苹果橙瓜木瓜][鳄梨椰子草莓]

我想把它变成这样

<div class="fruits">[ Banana Apple Orange Melon Papaya ][ Avocado Coconut Strawberry ]</div>

<div class="fruits">
<p id="pid_0" data-show="wid_0">
    <span id="wid_0" data-price="100" data-code="1">Banana</span>
    <span id="wid_1" data-price="200" data-code="2">Apple</span>
    <span id="wid_2" data-price="300" data-code="3">Orange</span>
    <span id="wid_3" data-price="400" data-code="4">Melon</span>
    <span id="wid_4" data-price="500" data-code="5">Papaya</span>
</p>
<p id="pid_5" data-show="wid_5">
    <span id="wid_5" data-price="600" data-code="6">Avocado</span>
    <span id="wid_6" data-price="700" data-code="7">Coconut</span>
    <span id="wid_7" data-price="800" data-code="8">Strawberry</span>
</p>

香蕉
苹果
橙色
甜瓜
番木瓜


鳄梨
椰子
草莓的

我就是这样走到这一步的

<script>
var price_arr = [100, 200, 300, 400, 500, 600, 700, 800];
var code_arr = [1, 2, 3, 4, 5, 6, 7, 8];

$(".fruits").each(function() { 
    $(this).text($(this).text().replace(/\w+/g, "<span>$&</span>")); 
    $(this).text($(this).text().replace(/\[/g, "<p> ")); 
    $(this).text($(this).text().replace(/\]/g, "</p>")); 
});

var str = $(".fruits").text();
var words = str.split(" ");
var result = [];
var obj = {};

for (var i = 0; i < words.length - 1; i++) {
    // words
    words[i] += " ";

    var w = "wid_"+i;
    var p = "pid_"+i;

    var price = price_arr[i];
    var code = code_arr[i];
    var name = words[i] += " ";

    obj = {get_price:price, get_code:code, display:name};
    result.push(obj);
}
</script>

var price_arr=[100200300400500600700800]；
var代码_arr=[1,2,3,4,5,6,7,8]；
$（“.fruits”）.each（函数（）{
$（this）.text（$（this）.text（）.replace（/\w+/g，“$&”）；
$（this）.text（$（this）.text（）.replace（/\[/g，“”））；
$（this）.text（$（this）.text（）.replace（/\]/g，“
”）；
});
var str=$（“.fruits”）.text（）；
var words=str.split（“”）；
var结果=[]；
var obj={}；
for（var i=0；i

---

我想使用数据对象（obj）并将其存储到每个html属性中，但我被卡住了。任何人请帮助我，我将不胜感激。

您可以解析

.fruits

元素的

.textContent

，使用

.replace（）

，

JSON.parse（）

创建数组；使用

$.map（）

增量变量存储
p
元素的
id
、
0
、
1
、
0
的
id
、
span
元素的
id
、
“code”
和
“价格”
数据-*
在
jQuery（html，属性）


var-fruit=$（“.fruits”）；
var data=fruit.text（）
.替换（/（\w+）/g，“\”$1\”，”）
.替换（/，（？=\s]）/g，“”）
.替换（/\]\[/，“]，[”）；
var-id=0；
var s=0；
var w=1；
var n=0；
var html=$.map（JSON.parse（“[”+data+“]），函数（el）{
var p=$（“”{
id:“pid”+id，
html:$.map（el，函数（_）{
返回$（“”）{
id:“wid_u3;”+（s++），
文本：_fruit+“\n”
})
艾特先生({
“数据价格”：（n+=100），
“数据代码”：w++
})
})
}).attr（“数据显示”、“wid”+id）；
id+=5；
返回p；
});
html（html）；

[香蕉苹果橙瓜木瓜][鳄梨椰子草莓]
只需与jquery的
数组#map
函数
append（）
函数配合使用即可

首先将html数据分成两个数组
然后映射每个数组
最后，映射每个具有in参数的数组
然后在a
fruits

var price_arr=[100200300400500600700800]；
var代码_arr=[1,2,3,4,5,6,7,8]；
变量a=$（'.fruits'）.text（）.split（']['））
$（'.fruits'）.empty（）
var k=0；
var c=0；
var结果=[]
var-res=[]；
a、 地图（（a，b）=>{
$（'.fruits'）.append（'
'））
a、 替换（/\]\[/g，“”）。拆分（“”）。映射（（a，b）=>{
如果（a）{
结果[c]={
获取价格：价格到达[c]，
get_code:code_arr[c]，
显示：a，
};
$（'#pid'+k+''）。追加（'+a+''）
C++；
}
})
k=c
})
控制台日志（结果）；
console.log（$（'.fruits'）.html（））

[香蕉苹果橘子瓜木瓜][鳄梨椰子草莓]
您的代码片段没有运行。非常感谢您……这太棒了。。！