Question

我有一个外部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 = []。

Answer 1

您可以通过遍历每个.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>

Answer 2

以下内容会将每个ul映射到一个数组，并将每个ul中的所有lis映射到一个数组，因此它将是一个二维数组，其中每个category_list[#]是一个ul，子数组是每个li的您修改过的文字。

function a() {
  var category_list = $('.ul_list').get().map(function(ul){
    return $('li', ul).get().map(function(li){
      return $(li).text().replace(/\s\s+/g, ' '); //removes whitespaces
    });
  });
  
  console.log(category_list);
}

a();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="ul_list">
  <li>1 Thing</li>
  <li>2 Thing</li>
  <li>3 Thing</li>
</ul>

<ul class="ul_list">
  <li>4 Thing</li>
  <li>5 Thing</li>
  <li>6 Thing</li>
</ul>

Answer 3

也许有点简化，但是我得到了想要的输出。
https://jsbin.com/tofimik/edit?html,js,console,output

步骤1.声明空数组
步骤2.运行循环，将所有子元素放入ul元素中
步骤3.将每个子级集合变成一个数组
步骤4.将子集合推入新数组

  var temp = []
  var cat;
  $('ul').each(function(){
    cat = []
    var liTags = Array($(this).children().text().trim());
    temp.push(liTags);
  })

Answer 4

（代表问题作者发布了解决方案）。

此解决方案由James_F提供：

   function a{
     let category_list = [];

     $(".ul_list").each(function(){
       let temp = [];
       $(this).children().each(function(){
          //adding only those list elements of a ul, that are red in color
          if($(this).children().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);
     })
   }

如何在JavaScript中将项目追加到嵌套数组

4 个答案: