如何删除前置的兄弟项

Question

首先声明我的 foreach 循环没有任何问题，使用 json 或我的 ajax 函数发送数据。

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

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

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

1.

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

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

2.

BAD - 这基本上与上面的完全相反。使用当前状态的代码（使用 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);
});

More information about empty()

如何删除前置的兄弟项

How to remove prepended sibling items

html

javascript

each

jquery

prepend