我有一个外部 JS 数组“main_category”，其中应包含多个名为“temp”的数组。
数组 temp 包含几个取自 li 标签的字符串元素。
为了填充这两个数组，我对 html 页面中的每个 ul 标签的每个 li 标签运行了一个 for 循环，如下所示:
function a{
var category_list = [];
var temp;
//how to split this list iteration into two for-loops
$(".ul_list li").each(function(){
temp = [];
//adding only those list elements of a ul, that are red in color
if($(this).attr("style") == "color:red"){
var cat = $(this).text();
cat = cat.replace(/\s\s+/g, ' '); //removes whitespaces
temp.push(cat); //creates a single array for a single element
}
}
category_list.push(temp);
});
}
期望的输出:
category_list = [['l1', 'l2', 'l3'], ['l1', 'l2', 'l3'], ['l1', 'l2', 'l3']..]
当前输出:
category_list = [['li'], ['l2'], ['l3']...]
但是，temp.push(cat) LOC 为每个单独的 li 元素创建一个临时数组，而不是为一个 ul 中的所有 li 元素创建一个 temp=[]。
最佳答案
您可以通过遍历每个 .ul_list 元素来做到这一点，然后按该顺序它们的子元素应该会给您预期的结果。
function a() {
let list = []
$(".ul_list").each(function() {
let temp = []
$(this).children().each(function() {
let text = $(this).text()
text.replace(/\s\s+/g, ' ')
temp.push(text)
})
list.push(temp)
})
return list
}
console.log(a())或者，如果您需要一个可以处理彼此嵌套的 ul 的递归实现:
function getListItems(ul) {
let temp = []
$(ul).children().each(function() {
if ($(this).is("ul")) { // checks if child is a list
temp.push(getListItems($(this))) // recursive call
} else { // child is list item
let text = $(this).text()
text.replace(/\s\s+/g, ' ')
temp.push(text)
}
})
return temp
}
function a() { // main function
let list = []
$(".ul_list").each(function() {
list.push(getListItems($(this)))
})
return list
}
console.log(a())<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src=https://code.jquery.com/jquery-1.9.1.js></script>
</head>
<body>
<ul class="ul_list">
<li>l1</li>
<li>l2</li>
<li>l3</li>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
</ul>
</ul>
</ul>
<ul class="ul_list">
<li>l1</li>
<li>l2</li>
<li>l3</li>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
</ul>
</ul>
</ul>
</ul>
<ul class="ul_list">
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
<ul class="ul_list">
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
<ul class="ul_list">
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
<script type="text/javascript" src="main.js"></script>
</body>
</html>关于javascript - 如何在 JavaScript 中将项目附加到嵌套数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55480277/