时间戳

首页 > 解决方案 > 如何遍历每个 div 的 div

javascript - 如何遍历每个 div 的 div

问题描述

撇开可怕的标题不谈，我目前有一个动态表单，其中包含任务，每个任务，状态。任务的数量和状态可能会有所不同。我要做的是提交与该状态相关的任务名称、状态名称和颜色。

<form>
    <div class='task'>
        <input type="text" name="taskName[]" value="Task name">            
        <input type="text" name="status[]" class="pill gray" value="Status name">
        <input type="text" name="status[]" class="pill blue" value="Status Name">
        <input type="text" name="status[]" class="pill orange" value="Status Name">
        <button>Add Status</button>
    </div>
    <div class='task'>
        <input type="text" name="taskName[]" value="Task name">
        <input type="text" name="status[]" class="pill red" value="Status name">
        <input type="text" name="status[]" class="pill yellow" value="Status Name">
        <button>Add Status</button>
    </div>
    <button>Add Task</button>
</form>

我通过 js 提交表单，唯一不同的是从颜色创建一个数组。

let colors = [];
for (let i = 0; i < tasks.length; i++) {
    const element = statuses[i];
    let pills = element.querySelectorAll('.pill');
    pills.forEach(element => {
        colors.push([element.classList[1]]);
    });
}

// Submit form
formData = new FormData(form);
formData.append("colors", colors);
// Ajax to php

在 php 页面上，我可以遍历任务，但我不确定如何遍历与该任务相关的状态。当前，每个任务都显示所有状态。

$taskName_array = isset($_POST['taskName']) ? $_POST['taskName'] : array();
$colors_array = isset($_POST['colors']) ? $_POST['colors'] : array();
$colors_array = explode(',', $colors_array);
// This outputs:
//  Array
// (
//     [0] => Gray
//     [1] => Blue
//     [2] => Orange
//     [3] => Red
//     [4] => Yellow
// )
$total_rows = count($taskName_array);

for ($i = 0; $i < $total_rows; $i++) {
    echo $taskName_array[$i];

    // Begin loop through status (Expecting not all statuses just the ones in the same div)
    for ($a = 0; $a < $colors_array ; $a++) {
        // I'm aware this would echo all the colors (not what I want) vs just the corresponding colors.
        echo $colors_array[$a];
    } 
}

预期结果将类似于“Task1-gray, blue, orange | Task2-red, yellow” 如果不清楚或者您需要更多，请告诉我。

标签： javascriptphphtmlarrays

解决方案

实现此目的的一种方法是添加隐藏输入并为其分配颜色值。IE

<div class='task'>
  <input type="text" name="taskName[]" value="Task name">
  <input type="hidden" name="colors[]">
  <!--all same..-->
  <button>Add Status</button>
</div>
<div class='task'>
  <input type="text" name="taskName[]" value="Task name">
  <input type="hidden" name="colors[]">
  <!--all same..-->
  <button>Add Status</button>
</div>

然后，在您的javascript代码中，当您遍历pill输入时，您可以在相应的输入中添加颜色值，即：

let colors = [];
let tasks = document.querySelectorAll('.task');
 for (let i = 0; i < tasks.length; i++) {
      //loop thrugh pill inside that div
      tasks[i].querySelectorAll('.pill').forEach(element => {
      colors.push(element.classList[1]);
  });
 tasks[i].querySelector("[name='colors[]']").value = colors //assign value to hiden input
   colors = [] //empty array
 }
   //other codes..ajax..call .

快速演示：

let colors = [];
let tasks = document.querySelectorAll('.task');
for (let i = 0; i < tasks.length; i++) {
  //loop thrugh pill inside that div
  tasks[i].querySelectorAll('.pill').forEach(element => {
    colors.push(element.classList[1]);
  });
  tasks[i].querySelector("[name='colors[]']").value = colors
  colors = []
}
//other codes..ajax..etc
<form name="forms">
  <div class='task'>
    <input type="text" name="taskName[]" value="Task name">
    <!--for demo..change type="hidden"-->
    <input type="text" name="colors[]">
    <input type="text" name="status[]" class="pill gray" value="Status name">
    <input type="text" name="status[]" class="pill blue" value="Status Name">
    <input type="text" name="status[]" class="pill orange" value="Status Name">
    <button>Add Status</button>
  </div>
  <div class='task'>
    <input type="text" name="taskName[]" value="Task name">
    <input type="text" name="colors[]">
    <input type="text" name="status[]" class="pill red" value="Status name">
    <input type="text" name="status[]" class="pill yellow" value="Status Name">
    <button>Add Status</button>
  </div>
  <button>Add Task</button>
</form>

最后，在您的后端页面中，您可以简单地使用获取该值$_POST['colors']，您可以将其分解或直接通过echo显示它们。IE：

$taskName_array = isset($_POST['taskName']) ? $_POST['taskName'] : array();
$status = isset($_POST['colors']) ? $_POST['colors'] : array();
$total_rows = count($taskName_array);
for ($i = 0; $i < $total_rows; $i++) {
     echo $taskName_array[$i] ."\n";
     echo $status[$i];
}

推荐阅读