如何删除预读兄弟姐妹的项目

Question

让我首先说明我对foreach循环没有任何问题，将数据发送给JSON或我的Ajax函数。

我遇到的问题是使所有填充的.projectCont正确显示。

背景：用户单击列表项之一，以显示刚选择的类别的图像。我正在运行查询以从该类别中提取所有图像。然后，显然，我希望所有图像出现在屏幕上。

问题：我目前面临两种情况。

1。

bad - 如果我将每个函数($('#projectsWrap').prepend(this.html);(中的以下内容更改为( $('#projectsWrap').html(this.html);( - 则只有一个图像显示(但是，我的控制台日志语句仍然输出所有查询项目。..

多于一个。

好 - 每当我单击新列表项目时，现有列表项目就会消失，新的单击列表项目出现。

2。

坏 - 这基本上与上面的完全相反。将代码处于当前状态(使用prepend(，如果我单击新的类别列表项目，则不会删除现有查询的图像。我尝试添加以下代码来解决此问题，但似乎只删除了一张图像。$('#projectsWrap').find('.projectCont').prev().siblings().remove();

好 - 所有查询图像显示。

有人知道我如何更改JS以获取所有查询图像以显示每个类别的图像，然后在选择其他列表项目时删除现有类别图像并仅显示这些类别图像？

html

<ul>
    <li class="categoryList" data-category="Linear Motion">Linear Motion</li>
    <li class="categoryList" data-category="Structures">Structures</li>
    <li class="categoryList" data-category="Guarding">Guarding</li>
    <li class="categoryList" data-category="Enclosures">Enclosures</li>
    <li class="categoryList" data-category="Material Handling">Material Handling</li>
    <li class="categoryList" data-category="Workstations">Workstations</li>
    </ul>
    <div id="projectsWrap"></div>

JS

var displayProjects = JSON.parse(data);
$(displayProjects).each(function() {
    $('#projectsWrap').find('.projectCont').prev().siblings().remove();
    $('#projectsWrap').prepend(this.html);
    console.log(this.html);

}(;

php

if ($projects_stmt = $con->prepare($projects_sql)) {
        $projects_stmt->execute();
        $project_rows = $projects_stmt->fetchAll(PDO::FETCH_ASSOC);
        $proj_arr = array();
        foreach ($project_rows as $project_row) {
            $project_img = $project_row['p_img'];
            $project_alt = $project_row['p_alt'];
            $project_display_img = '<img src="'.$project_img.'" alt="'. $project_alt .'">';
            $project_title = $project_row['p_name'];
            $html = '';
            $html .= '<div class="projectCont">';
            $html .= $project_display_img;
            $html .= '<div class="projectInfo">';
            $html .= '<span class="projectTitle">' . $project_title . '</span>';
            $html .= '</div>';
            $html .= '</div>';
            $data = array('id' => $project_row['id'], 'date' => $project_row['date_added'], 'html' => $html);
            $proj_arr[] = $data;
        }
    }
    echo json_encode($proj_arr);

Answer 1

您可以在循环之前清空projectWraps DIV：

var displayProjects = JSON.parse(data),
  $wrapper = $('#projectsWrap'); // I would put this in a var for better performance if using it multiple times
$wrapper.empty(); // empty the wrapper
$(displayProjects).each(function() {
  $wrapper.prepend(this.html);
  console.log(this.html);
});

有关空的更多信息((