如何遍历每个 div 的 div

Question

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

<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” 如果不清楚或需要更多信息，请告诉我。

Answer 1

虽然斯瓦蒂的回答在技术上确实有效，但我得到了一个看起来像这样的数组

(
[0] => purple,gray,gray
[1] => 
[2] => 
[3] => red,gray,gray
[4] => 
[5] => 
)

我可以遍历并删除空数组项，但在 Swati 发布答案之前，我能够想出一种不同的方式来引入结果

在 html 上，我将名称更改为带键的多维数组

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

javascript 保持不变。 php 有点古怪（抱歉缺少 cmets，我从其他地方获得了部分代码，但在其他地方找不到）：

$tasks_array = isset($_POST['task']) ? $_POST['task'] : array();
$colors_array = isset($_POST['colors']) ? $_POST['colors'] : array();
$colors_array = explode(',', $colors_array);
$keys = array_keys($tasks_array);
$count=0;

for($i = 0; $i < count($tasks_array); $i++) {
    foreach($tasks_array[$keys[$i]] as $key => $value) {
        if ($key == 'status') {
            // Status Name
            $statusName = $value;
            $colorName = $colors_array[$count];
            $count++;
        } else {
            $taskName = $value;
        }
    }
}

这将输出

Taskname
  StatusName Color
  StatusName Color
  StatusName Color
Taskname
  StatusName Color
  StatusName Color

他们可能是这样做的更好方法，但现在，我将其标记为已接受的答案。

Answer 2

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

<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>

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

$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];
}