我有这样的 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>
这就是我到目前为止的方式
<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>
我想使用数据对象 (obj) 并将其存储到每个 html 属性,但我遇到了困难。任何人都请帮助我,我将不胜感激。
最佳答案
只需配合jquery的Array#map
函数append()
函数即可
- 首先将html数据分成两个数组
- 然后映射每个数组。
- 最后用参数映射每个数组。
- 然后在
fruits
中附加 with
var price_arr = [100, 200, 300, 400, 500, 600, 700, 800];
var code_arr = [1, 2, 3, 4, 5, 6, 7, 8];
var a = $('.fruits').text().split('][')
$('.fruits').empty()
var k = 0;
var c = 0;
var result = []
var res = [];
a.map((a, b) => {
$('.fruits').append('<p id="pid_' + k + '" data-show="wid_' + k + '"></p>')
a.replace(/\]|\[/g, "").split(" ").map((a, b) => {
if (a) {
result[c] = {
get_price: price_arr[c],
get_code: code_arr[c],
display: a,
};
$('#pid_' + k + '').append('<span id="wid_' + c + '" data-price="' + price_arr[c] + '" data-code="' + code_arr[c] + '">' + a + '</span>')
c++;
}
})
k = c
})
console.log(result);
console.log($('.fruits').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="fruits">[ Banana Apple Orange Melon Papaya ][ Avocado Coconut Strawberry ]</div>
关于数据对象的 Javascript dom 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43153322/