循环生成HTML的问题 - Issue with HTML generated by loop

我在创建可折叠元素列表时遇到了一些问题。JSFiddle

我的代码是这样的:

<div class="projectscontainer">
    <span class="item destproject" title="ID: 384">Kaoweuzax-Xrjamjhxteaq</span><br>
    <div class="srcprojects">
        <div class="arrow-right"></div>
            <span class="item srcproject" title="ID: 1991">Eovwurxmpgmz 6.b</span><br>
    </div>
</div>
<div class="projectscontainer">
    <span class="item destproject" title="ID: 383">Uxiuhbgbt0.5-Rdsopvxc Fucxbhivs</span><br>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 1990">Zekgyfrmc-Tpuduwzr Idkudowbi</span><br>
    </div>
</div>
<div class="projectscontainer">
    <span class="item destproject" title="ID: 394">Lyxiyp</span><br>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 2108">Kdvdz</span><br>
    </div>
</div>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 2109">Derqi-AA_Boejbvr</span><br>
    </div>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 2110">Yhdju-SkneLxiyuz</span><br>
    </div>

jQuery:

$(document).ready(function(){
    $(".projectscontainer").click(function(){
      $(this).children('.srcprojects').toggle();
    });
});

PHP:

<?php
$result_rules = $db->query("SELECT rules.source_id, rules.destination_id, dest.project AS dest_project, src.project AS src_project, src.    pk_id as src_id
        FROM dbo.FFC_Rules rules
        INNER JOIN dbo.FFC_Destination dest
            ON dest.pk_id=rules.destination_id
        LEFT JOIN dbo.FFC_Source src
            ON src.pk_id=rules.source_id
        ORDER BY dest.project ASC");
$last_dest = false;
$last_src = false;
while($row = sqlsrv_fetch_array($result_rules)){  
    if ($row['destination_id'] !== $last_dest) {
        $last_dest=$row['destination_id'];
        echo "<div class='projectscontainer'>";
        echo    "-<span class='item destproject' title='ID: ".$row['destination_id']."'>".$row['dest_project']."</span>";
        echo    "<br>";
    }
        echo    "<div class='srcprojects'>";
        echo        "<div class='arrow-right'></div>";
    if ($row['src_id'] === null) {
        echo        " Source ID for Destination ID ".$row['destination_id']." is NULL ";
    } else {
        echo        "<span class='item srcproject' title='ID: ".$row['src_id']."'>".$row['src_project']."</span>";
    }
    echo            "<br>";
    echo        "</div>";
    echo    "</div>";
}
?>

现在它的工作，如果只有一个srcproject在destproject下，但我想要所有的destproject的子项目(srcproject)隐藏当destproject被点击。

在第三个projectscontainerdiv中，在打印出所有srcprojects之前添加结束div标签。我该如何解决这个问题?

你的循环中有一些奇怪的东西。您正在打开

<div class='projectscontainer'>

在此条件下

if ($row['destination_id'] !== $last_dest) {

但是您不是在相同条件下关闭<div>，而是在没有任何条件的情况下关闭<div>。我认为生成的HTML格式不好，你的浏览器试图尽他最大的努力来修复它(徒劳)。

试题:

// Initialize the last dest
$last_dest = false;
// Loop on each result
while($row = sqlsrv_fetch_array($result_rules)) {
    // Check if the section is changing or if we are at the begining
    if ($row['destination_id'] !== $last_dest || $last_dest === false) {
        // Close the previous projectscontainer tag if we are not at the begining of the process
        if ($last_dest !== false)
            echo "</div>";
        // Update the last dest
        $last_dest = $row['destination_id'];
        // Open the new projectscontainer 
        echo "<div class='projectscontainer'>";
        echo    "-<span class='item destproject' title='ID: ".$row['destination_id']."'>".$row['dest_project']."</span>";
        echo    "<br>";
    }
    // Print the sub block
    echo "<div class='srcprojects'>";
    echo "    <div class='arrow-right'></div>";
    if ($row['src_id'] === null) {
        echo "Source ID for Destination ID ".$row['destination_id']." is NULL ";
    } else {
        echo        "<span class='item srcproject' title='ID: ".$row['src_id']."'>".$row['src_project']."</span>";
    }
    echo "<br />";
    echo "</div>";
}
// At the end at the process, close the last projectscontainer
echo "</div>";

我认为你想要隐藏最后一个项目的所有子项目，在这种情况下，你必须将你的HTML内容更改为

    <div class="projectscontainer"> <span class="item destproject" title="ID: 394">Lyxiyp</span>
<br>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2108">Kdvdz</span>
    <br>
</div>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2109">Derqi-AA_Boejbvr</span>
    <br>
</div>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Yhdju-SkneLxiyuz</span>
    <br>
</div>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Fcnlw-YTR-Orzqksr</span>
    <br>
</div>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Awhsa-DT</span>
    <br>
</div>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Kxqda-WuxkorctkwmWlioamud</span>
    <br>
</div>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Jnlps-NcsgfdlbpzaAhdthi</span>
    <br>
</div>