我有一个存储每个菜单标题的对象，并具有应位于每个相应标题下的链接。我遇到的问题是所有链接都在第一个 ul 元素下，而不是每个 ul 元素下。 This(data.Items[x].Children[y].Title) 应该填充在每个菜单标题下。我的代码如下:
<html>
<body>
<footer>
<div id="footerOverlay">
<div class="container-fluid">
<div class="row">
<div class="footer-content">
<div class="footer-left">
<div class="footer-left__menu">
<div class="row">
</div>
</div>
</div>
<div class="footer-right"></div>
</div>
</div>
</div>
</div>
</footer>
<script>
data =
{
"Items": [
{
"Title": "Fitness & Training",
"Url": "/club-resources",
"Children": [
{
"Title": "Find a Club/Coach",
"Url": "/club-resources"
},
{
"Title": "Drills and Technique",
"Url": "/fitness-and-training/drills-and-technique"
},
{
"Title": "Articles and Videos",
"Url": "/fitness-and-training/articles-and-videos"
}
]
},
{
"Title": "Events",
"Url": "/events",
"Children": [
{
"Title": "Fitness Events",
"Url": "/events/fitness-events"
},
{
"Title": "Clinics",
"Url": ""
},
{
"Title": "Results",
"Url": "/comp/meets/"
}
]
},
{
"Title": "About",
"Url": "/about-us",
"Children": [
{
"Title": "About Us",
"Url": "/about-us/"
},
{
"Title": "Partners",
"Url": "sponsor-partners"
},
{
"Title": "Contact Us",
"Url": "/contact-us"
}
]
},
{
"Title": "Join",
"Url": "/register1",
"Children": [
{
"Title": "Join Now",
"Url": "/register1"
},
{
"Title": "Renew Now",
"Url": "/renew"
},
{
"Title": "Products & Discounts",
"Url": "/products-and-discounts"
}
]
}
]
};
var numOfItems = data.Items.length, footerRow = document.querySelector(".footer-left__menu > .row");
footerRow.innerHTML = "";
for(x = 0; x < numOfItems; x++)
{
footerRow.innerHTML += "<h3 class='footer-menu__header'>" + data.Items[x].Title + "</h3>";
footerRow.innerHTML += "<ul class='footer-menu__list list--nostyle'>";
footerRow.innerHTML += "</ul>";
for(y = 0; y < data.Items[x].Children.length; y++){
document.querySelector(".footer-menu__list.list--nostyle").innerHTML +=
"<li><a href=''>" + data.Items[x].Children[y].Title + "</a></li>";
}
}
</script>
</body>
</html>
最佳答案
您只选择了第一个 ul 元素。相反，使用 querySelectorAll 和 x 索引来获取当前索引。
document.querySelectorAll(".footer-menu__list.list--nostyle")[x]...
关于javascript - 我的 JSON 数据仅填充到一个 ul 元素中，而不是每个 ul 元素中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48390925/