gpt4 book ai didi

javascript - 如何在 JavaScript 中将项目附加到嵌套数组

转载 作者:行者123 更新时间:2023-11-30 14:05:34 26 4
gpt4 key购买 nike

我有一个外部 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com