Javascript 如何使用jquery修复div中的多个追加

我在向div或html元素添加示例a href时遇到问题，我的ajax只有3个数组响应，但是结果显示相应div中有重复项。我将向大家分享我已经制作的示例代码

我这里有我的后端php：

    <?php 
    require_once('../ConnectionString/require_db.php');
    session_start();
    //submit function
    $status = 'Active';
    $posttype_affiliation_page = 'affiliation_page';
    $posttype_member_org_page = 'member_org_page';
    $affiliation_member_org_content = $db->prepare('SELECT title,link,posttype FROM tblcontent 
    WHERE status = ? AND posttype = ? OR posttype = ? ORDER BY contentID DESC') 
    or die($db->error);

    $affiliation_member_org_content->bind_param('sss',$status,$posttype_affiliation_page,$posttype_member_org_page);
    $affiliation_member_org_content->execute();
    $affiliation_member_org_content->bind_result($title,$link,$posttype);
    $result = array();

    while ($affiliation_member_org_content->fetch()) {
        $result[] = array('title'=>$title,'link'=>$link,'posttype'=>$posttype);
       header('Content-type: application/json');

   }

    echo json_encode($result);

?>

我的前端：

    $(document).ready(function(){
        //mission vision
        $.ajax({
        url:'./Function/fetch_affiliation_member_org.php',
        type:'get',
        success:function(response_fetch_affiliation_member_org) {
                console.log(response_fetch_affiliation_member_org);
                var fetch_affiliation_member_org = jQuery.parseJSON(JSON.stringify(response_fetch_affiliation_member_org));
                $.each(fetch_affiliation_member_org,function(i,data){
                        if(data.posttype == 'affiliation_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                data = '<p style="font-size:14px;" class="list_affiliation_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_affiliation_links').append(data);

                        }
                        else if(data.posttype == 'member_org_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                data = '<p style="font-size:14px;" class="list_member_org_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_member_org_links').append(data);
                        } 

                });

        },
        error:function(error) {
                console.log(error);
        }
        });
});

$（文档）.ready（函数（）{
//使命愿景
$.ajax({
url:“./Function/fetch\u affiliation\u member\u org.php”，
类型：'get'，
成功：功能（响应\获取\隶属关系\成员\组织）{
日志（响应、获取、隶属关系、成员、组织）；
var fetch_affication_member_org=jQuery.parseJSON（JSON.stringify（response_fetch_affication_member_org））；
$。每个（获取\隶属关系\成员\组织、职能（i、数据）{
如果（data.posttype=='affiliation\u page'）{
const title=data.title；
const link=data.link；
var数据=”；
数据='
；
$（'p.list\u affiliation\u links'）。追加（数据）；
}
else if（data.posttype==“成员组织页面”）{
const title=data.title；
const link=data.link；
var数据=”；
数据='
；
$（'p.list\u member\u org\u links'）。追加（数据）；
} 
});
},
错误：函数（错误）{
console.log（错误）；
}
});
});

我的Html：

<div class="Affiliation">
                    <h5>Affiliation</h5>

                    <p style="font-size:14px;" class="list_affiliation_links">

                    </p>
                </div>
                <br>
                <div class="Member">
                    <h5>Member Organizations</h5>
                    <p style="font-size:14px;" class="list_member_org_links">

                    </p>
                </div>

附属




成员组织

$（文档）.ready（函数（）{
//使命愿景
$.ajax({
url:“./Function/fetch\u affiliation\u member\u org.php”，
类型：'get'，
成功：功能（响应\获取\隶属关系\成员\组织）{
日志（响应、获取、隶属关系、成员、组织）；
var fetch_affication_member_org=jQuery.parseJSON（JSON.stringify（response_fetch_affication_member_org））；
$。每个（获取\隶属关系\成员\组织、职能（i、数据）{
如果（data.posttype=='affiliation\u page'）{
const title=data.title；
const link=data.link；
var数据=”；
$（'p.list\u affiliation\u links'）.html（“”）；
数据='
；
$（'p.list\u affiliation\u links'）。追加（数据）；
}
else if（data.posttype==“成员组织页面”）{
const title=data.title；
const link=data.link；
var数据=”；
$（'p.list\u member\u org\u links'）.html（“”）；
数据='
；
$（'p.list\u member\u org\u links'）。追加（数据）；
} 
});
},
错误：函数（错误）{
console.log（错误）；
}
});
});

您应该首先清除html内容，然后设置为DOM元素。它可能适合您。

<代码>$（文档）。就绪（函数（）{ //使命愿景 $.ajax({ url:“./Function/fetch\u affiliation\u member\u org.php”， 类型：'get'， 成功：功能（响应\获取\隶属关系\成员\组织）{ 日志（响应、获取、隶属关系、成员、组织）； var fetch_affication_member_org=jQuery.parseJSON（JSON.stringify（response_fetch_affication_member_org））； $。每个（获取\隶属关系\成员\组织、职能（i、数据）{ 如果（data.posttype=='affiliation\u page'）{ const title=data.title； const link=data.link； var数据=”； $（'p.list\u affiliation\u links'）.html（“”）； 数据='

； $（'p.list\u affiliation\u links'）。追加（数据）； } else if（data.posttype==“成员组织页面”）{ const title=data.title； const link=data.link； var数据=”； $（'p.list\u member\u org\u links'）.html（“”）； 数据='

； $（'p.list\u member\u org\u links'）。追加（数据）； } }); }, 错误：函数（错误）{ console.log（错误）； } }); });

---

您应该首先清除html内容，然后设置为DOM元素。它可能适合您。

您正在用HTML附加第二个p标记，该标记在代码后面的附加中也会被选中。您应该只使用var数据构建链接

---

问候语

您在HTML中添加了第二个p标记，该标记也可以

 $(document).ready(function(){
        //mission vision
        $.ajax({
        url:'./Function/fetch_affiliation_member_org.php',
        type:'get',
        success:function(response_fetch_affiliation_member_org) {
                console.log(response_fetch_affiliation_member_org);
                var fetch_affiliation_member_org = jQuery.parseJSON(JSON.stringify(response_fetch_affiliation_member_org));
                $.each(fetch_affiliation_member_org,function(i,data){
                        if(data.posttype == 'affiliation_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                $('p.list_affiliation_links').html('');
                                data = '<p style="font-size:14px;" class="list_affiliation_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_affiliation_links').append(data);

                        }
                        else if(data.posttype == 'member_org_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                $('p.list_member_org_links').html('');
                                data = '<p style="font-size:14px;" class="list_member_org_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_member_org_links').append(data);
                        } 

                });

        },
        error:function(error) {
                console.log(error);
        }
        });
});