Javascript 使用jqueryappend向HTML添加JSON项

多个按钮具有类别名称数据b类别。当我单击该按钮时，基于该类别值，使用ajax技能将从数据库中显示。我已经编写了一个函数，它将返回JSON，格式如下。但是在视图中，我想为每个技能划分类别。我一个接一个地编写了每个函数和显示技能值，但没有针对类别编写。我认为解决方案是分别编写另一个并显示类别名称。请检查预期结果和实际结果

HTML

实际结果

<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="95">Car Washing</label>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="100">Sewage Cleaning</label>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="292">Furniture Installation</label>

预期结果

<h4 class="signup-sub-cat">Cleaning</h4>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="95">Car Washing</label>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="100">Sewage Cleaning</label>
<h4 class="signup-sub-cat">Maintenance</h4>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="292">Furniture Installation</label>

---

您必须使用两个函数来归档您的目标

首先，您必须使用每个函数来分隔类别。然后使用forloop显示这些类别下的所有技能。

我找到了答案

$.each(e, function (e, l) {
 $("#ajaxdisplayskills").append('<h4 class="signup-sub-cat">' + l.sub_cat + '</h4>');
 var skill_name = l.skill.split(',');
 var skill_id = l.id.split(',');
 var q;
 for (q = 0; q < skill_name.length; q++){
      $("#ajaxdisplayskills").append('<label class="chkskills cursor1"><input class="hid" name="fr_skills" type="checkbox" value="' + skill_id[q] + '" />' + skill_name[q] + "</label>");
      }
 })

---

问题是什么？你试过什么？Stackoverflow不是免费的代码编写服务。请检查预期结果和实际结果。我想显示类别名称。这是您的目标..当然。但这不是特定于代码的问题。你是想让人帮你写这一切吗？是的，请帮我解决这个问题。我尽力了。但是没有得到预期的结果。谢谢@user7152572，我找到了答案

<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="95">Car Washing</label>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="100">Sewage Cleaning</label>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="292">Furniture Installation</label>

<h4 class="signup-sub-cat">Cleaning</h4>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="95">Car Washing</label>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="100">Sewage Cleaning</label>
<h4 class="signup-sub-cat">Maintenance</h4>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="292">Furniture Installation</label>

$.each(e, function (e, l) {
 $("#ajaxdisplayskills").append('<h4 class="signup-sub-cat">' + l.sub_cat + '</h4>');
 var skill_name = l.skill.split(',');
 var skill_id = l.id.split(',');
 var q;
 for (q = 0; q < skill_name.length; q++){
      $("#ajaxdisplayskills").append('<label class="chkskills cursor1"><input class="hid" name="fr_skills" type="checkbox" value="' + skill_id[q] + '" />' + skill_name[q] + "</label>");
      }
 })