如何遍历 div 中的 ul 元素并在提交时单独隐藏它们？答案

【问题标题】：How to iterate through ul elements within a div and hide them individually on a submit?如何遍历 div 中的 ul 元素并在提交时单独隐藏它们？
【发布时间】：2020-04-09 09:07:51
【问题描述】：

在我使用 express 的节点应用程序中，我有一个查看功能，可以创建非活动公司列表，每个公司都有两个提交输入类型“活动”和“删除”。我希望能够点击提交并隐藏该个人 ul。但是，我不太确定如何单独迭代。每次我尝试过时，我最终都会隐藏所有元素。这是我的视图函数：

function inactiveFiltered(companyObject) {
    return `
        <ul class="companyinfo">
            <li class="list-info">${companyObject.company_type}</li>
            <li class="list-info">${companyObject.company_name}</li>
            <li class="list-info">${companyObject.company_location}</li>
            <li class="list-info">${companyObject.company_phone}</li>
            <br>
            <li class="list-buttons">
                <form action="/activeList" method="POST" class="myform">
                    <input type="hidden" name="companyId" value="${companyObject.id}">
                    <input type="submit" value="Active">
                </form>
                <form action="/deletecompany" method="POST">
                    <input type="hidden" name="companyId" value="${companyObject.id}">
                    <input type="submit" value="Delete">
                </form>
            </li>
            <br>
        </ul>
    `
}

function inactiveList(arrayOfCompanies){
    const companyItems = arrayOfCompanies.map(inactiveFiltered).join('');

    return `
        <div class="list inactive-list">
            ${companyItems}
        </div>
    `
}

module.exports = inactiveList;

一个函数接受一组公司，然后创建一个公司对象。现在这是最新的 JQuery 尝试，但就像我说的它隐藏了所有 ul 元素：

                $(document.body).submit(function() {
                    $('.companyinfo').each(function(i) {
                        $(this).hide();
                    })
                })

我已经被困在这个问题上太久了，希望能得到任何帮助。谢谢！

【问题讨论】：

标签： javascript jquery css node.js express

【解决方案1】：

您同时隐藏了所有元素，因为选择器 .companyinfo 返回使用类 companyinfo 的所有元素的列表，这些元素在您的案例中都是公司。这就是为什么它们同时被隐藏的原因

实现目标的一种方法是将 ID 添加到 ul 元素，以便能够为每个公司单独处理它们，如下所示：<ul id="companyinfo_${companyObject.company_name}" class="companyinfo">。

然后添加一个方法hideCompany()来替换$(document.body).submit(function()部分：

function hideCompany(companyname) {
    $('#companyinfo_' + companyname).hide();
}

最后将<input type="submit" value="Delete">修改为<input type="submit" value="Delete" onclick="hideCompany('${companyObject.company_name}')">。

【讨论】：

谢谢！效果很好。