我一直在尝试理解具有多个值的键/值对。
我想做的是迭代 div 中的列表,从 LI
获取值,然后根据它们所在的 div 创建一个键,然后附加这些 LI
到另一个 div,并将其 key 作为标题。我得到了一个基本结果,但我的代码只产生一个结果:每个键一个值。我想为每个键生成多个值。
我最终想要的是一个像这样的对象,但我不知道如何用我得到的数据动态生成它:
{ "bands": [
{ "band": "beatles", "musician": "john" },
{ "band": "beatles", "musician": "paul" },
{ "band": "beatles", "musician": "ringo" },
{ "band": "beatles", "musician": "george" },
{ "band": "stones", "musician": "mick" },
{ "band": "stones", "musician": "keith" },
{ "band": "stones", "musician": "ronnie" },
{ "band": "stones", "musician": "charlie" },
] }
HTML
<button>Click 'em</button>
<div id="beatles">
<ul>
<li>John</li>
<li>Paul</li>
<li>Ringo</li>
<li>George</li>
</ul>
</div>
<div id="stones">
<ul>
<li>Mick</li>
<li>Keith</li>
<li>Ronnie</li>
<li>Charlie</li>
</ul>
</div>
<div id="beatlesList">
<ul></ul>
</div>
<div id="stonesList">
<ul></ul>
</div>
JS/JQ
$('button').click(function(){
var $bands = {}
$('ul li').each(function(){
var $bandName = $(this).parents('div').attr('id');
var $bandMember = $(this).text();
console.log($bandName);
$bands[$bandName] = $bandMember;
})
console.log($bands);
$.each($bands,function(k,v){
if(k === "beatles") {
$('#beatlesList').prepend('<h2>' + k + '</h2>')
$('#beatlesList ul').append('<li>' + v + '</li>')
} else {
$('#stonesList').prepend('<h2>' + k + '</h2>')
$('#stonesList ul').append('<li>' + v + '</li>')
}
})
})
预期的 HTML 结果
<button>Click 'em</button>
<div id="beatles">
<ul>
<li>John</li>
<li>Paul</li>
<li>Ringo</li>
<li>George</li>
</ul>
</div>
<div id="stones">
<ul>
<li>Mick</li>
<li>Keith</li>
<li>Ronnie</li>
<li>Charlie</li>
</ul>
</div>
<div id="beatlesList">
<h2>beatles</h2>
<ul>
<li>John</li>
<li>Paul</li>
<li>Ringo</li>
<li>George</li>
</ul>
</div>
<div id="stonesList">
<h2>stones</h2>
<ul>
<li>Mick</li>
<li>Keith</li>
<li>Ronnie</li>
<li>Charlie</li>
</ul>
</div>
最佳答案
我并不百分百清楚你在追求什么。我认为这会做你似乎正在尝试的事情。如果最终您希望移动项目而不是克隆和按摩它们,那么这个答案当然可以简化。当然,我也可以认为你的要求完全不正确。你发布的 JSON 是如何影响这个因素的?您是在寻找 JSON 结果,还是在寻找您发布的结果 HTML,或者两者兼而有之?
document.getElementById("go").addEventListener("click", function(){
var sources = Array.from(document.querySelectorAll(".sourceData"));
sources.forEach(function(item){
var target = document.getElementById(item.id + "List");
if (!target) { return; }
var targetTitle = item.id
targetTitle = targetTitle.charAt(0).toUpperCase() + targetTitle.slice(1);
target.querySelector("h2").innerText = targetTitle;
var parent = target.querySelector("ul");
var children = Array.from(item.querySelectorAll("li"));
children.forEach(function(item){
var el = document.createElement("li");
el.innerText = item.innerText;
parent.appendChild(el);
});
});
});
#beatles, #beatlesList { background-color: aliceblue; }
#stones, #stonesList { background-color: mistyrose; }
<div id="beatles" class="sourceData">
<ul>
<li>John</li>
<li>Paul</li>
<li>Ringo</li>
<li>George</li>
</ul>
</div>
<div id="stones" class="sourceData">
<ul>
<li>Mick</li>
<li>Keith</li>
<li>Ronnie</li>
<li>Charlie</li>
</ul>
</div>
<div id="beatlesList">
<h2></h2>
<ul></ul>
</div>
<div id="stonesList">
<h2></h2>
<ul></ul>
</div>
<button id="go">Go</button>
关于javascript - 具有多个值的键/值对,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38252900/