我有這個物件陣列
[
{
"id": "41796005",
"name": " Manoj ",
"phoneno": " xyz",
"email": "[email protected]"
},
{
"id": "160865953",
"name": " Manisha Sajnani ",
"phoneno": "xyz",
"email": "[email protected]"
}
]
這是idhtml頁面中的div
<div class="tuple on" data-tuple-id="160865953" ></div>
id's div phoneno所以我的問題是，如果兩者都匹配，我該如何附加值
div 沒有。40 個
展示我們如何回圈它們并將該資料附加到陣列中可用的 id
uj5u.com熱心網友回復：
另一個可能的食譜。
arr.forEach((x) => {
const elem = document.querySelector(`[data-tuple-id="${x.id}"]`)
elem.innerHTML = x.phoneno
})
uj5u.com熱心網友回復：
回圈資料和 div，比較 id 并將您的資料作為 html 附加到 div 上。
例子：
var data = [{
"id": "41796005",
"name": " Manoj ",
"phoneno": " xyz",
"email": "[email protected]"
},
{
"id": "160865953",
"name": " Manisha Sajnani ",
"phoneno": "xyz",
"email": "[email protected]"
}
]
$('.tuple').each(function() {
var divid = $(this).data("tuple-id");
var _id = $(this);
$.each(data, function(key, val) {
if (divid == val.id) {
_id.html(val.name '---' val.phoneno '---' val.email)
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tuple on" data-tuple-id="160865953"></div>uj5u.com熱心網友回復：
- 遍歷陣列
- 使用 querySelecto 搜索元素
querySelector(`div[data-tuple-id = "${obj.id}"`) - 插入手機
innerHTML
const data = [{"id": "41796005", "name": " Manoj ", "phoneno": " xyz", "email": "[email protected]"}, {"id": "160865953", "name": " Manisha Sajnani ", "phoneno": "xyz", "email": "[email protected]"} ];
for (let obj of data) {
const e = document.querySelector(`div[data-tuple-id = "${obj.id}"`);
if (e) {
e.innerHTML = obj.phoneno;
} else {
console.log('Can\'t find element with the following id', obj.id);
}
}<div class="tuple on" data-tuple-id="160865953" ></div>uj5u.com熱心網友回復：
也許這就是你要找的。
$(".tuple").text(function() {
var n = d.find(x => x.id === $(this).attr("data-tuple-id"))
return n ? n.phoneno : "";
})
phoneno如果找到任何匹配項，這會將值 from插入 div
演示
顯示代碼片段
var d = [
{
"id": "41796005",
"name": " Manoj ",
"phoneno": " test",
"email": "[email protected]"
},
{
"id": "160865953",
"name": " Manisha Sajnani ",
"phoneno": "xyz",
"email": "[email protected]"
}
]
$(".tuple").text(function() {
var n = d.find(x => x.id === $(this).attr("data-tuple-id"))
return n ? n.phoneno : "";
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tuple on" data-tuple-id="160865953" ></div>
<div class="tuple on" data-tuple-id="41796005" ></div>
<div class="tuple on" data-tuple-id="23123123" ></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/487927.html
標籤：javascript jQuery