如何在 div 中循环访问 ul 元素并在提交时单独隐藏它们?

Question

在使用 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();
})
})

我已经坚持了太久了，希望得到任何帮助。谢谢！

Answer 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}')">。