追加jquery函数加载多个内容答案

【问题标题】：Append jquery function load multiple content追加jquery函数加载多个内容
【发布时间】：2018-02-01 10:56:54
【问题描述】：

我需要一些建议，因为我对使用附加 jquery 函数和 ajax 请求在 html 页面中插入数据的一个小问题感到抓狂。

我在 ul 元素下有这个具有不同内容的 html 块...在 <ul class="pre-wed-list "> 中有一些我直接插入到 html 代码中的图像，而不是插入到 <ul class="pre-wed-list" id="rudr_instafeed"></ul> 我需要从我的 instagram 流中捕获的照片（它已经在工作) 使用下面报告的 ajax 请求。这里我们有html代码

<div class="container">
                <div class="row">

                    <!-- Nav Tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#pre-wed" aria-controls="pre-wed" role="tab" data-toggle="tab">Engagement</a></li>
                        <li role="presentation"><a href="#rudr" aria-controls="#rudr" role="tab" data-toggle="tab">#blabla</a></li>
                    </ul><!-- .nav .nav-tabs -->

                    <!-- Tab Panes -->
                    <div class="tab-content">
                        <div role="tabpanel" id="pre-wed" class="tab-pane active fade in tab-content-each">
                            <ul class="pre-wed-list ">
                                <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li>
                                <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li>
                                <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li>
                                <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li>
                                <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li>
                                <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li>
                                <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li>
                                <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li>


                            </ul>
                        </div>
                        <div role="tabpanel" id="rudr" class="tab-pane fade tab-content-each"></div>
                        <ul class="pre-wed-list" id="rudr_instafeed"></ul>
                        </div>
                </div><!-- .row -->
            </div><!-- .container -->
        </section><!-- .instagram-feed -->

这里我们有ajax请求：

  <script type="text/javascript">
   $(document).ready(function(){
        var token = '44386xx.e90c004.xxxxxxxxxxxxx',
    num_photos = 10;

$.ajax({
    url: 'https://api.instagram.com/v1/users/self/media/recent',
    dataType: 'jsonp',
    type: 'GET',
    data: {access_token: token, count: num_photos},
    success: function(data){
        console.log(data);
        for( x in data.data ){
            $("#rudr_instafeed").append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>');
        }
    },
    error: function(data){
        console.log(data);
    }
});
});

    </script>

Ajax 请求正常工作，我需要的内容已加载，但问题是追加 jquery 函数

$("#rudr_instafeed").append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>');

从 instagram 流中正确收取内容照片，但不仅在#rudr_instafee（我需要拥有）中，甚至在<ul class="pre-wed-list "> </ul> 中的我的图像块下。

我向社区寻求一些帮助来解决它，我很害怕，我没有成功解决它:(。

谢谢。问候

【问题讨论】：

你在同一个ul 上同时拥有pre-wed-list 和id rudr_instafeed：-<ul class="pre-wed-list" id="rudr_instafeed"></ul>。这就是你看到它的原因。现在告诉我你的观点
嗨@AlivetoDie，谢谢你的回答，如果我在这个ul元素中有class="pre-wed-list" id="rudr_instafeed"，我不明白哪里有问题，追加函数只需要对仅在此元素中而不在其他元素中的#rudr_instafeed 起作用。谢谢
你有多个 ul 具有相同的类和 id 吗？
mm 不，正如您在代码中看到的那样，我有两个 ul 元素，但只有一个有 #rudr_instafeed，用于在其中附加带有 jquery 的 html 内容。第一个 ul 元素只有 class="pre-wed-list" （但附加功能甚至适用于它），而第二个 ul （我只需要在其中看到我用 jquery 附加的内容）有 class=" pre-wed-list" 和 id="rudr_instafeedthat" 你看到我看不到的东西了吗？谢谢@AlivetoDie

标签： jquery html ajax append instagram

【解决方案1】：

幸运的是我已经解决了，问题是关闭的位置错误，下面的 html 代码已更正

<div role="tabpanel" id="rudr" class="tab-pane fade tab-content-each">
 <ul class="pre-wed-list" id="rudr_instafeed"></ul>
</div>

有时过多的工作和疲劳会成为一个笑话。现在谢谢你。

【讨论】：