Question

我需要一些吸引力，因为我在使用追加jquery函数和ajax请求在html页面中插入数据时会遇到一些小问题。

我有这个html块，在ul元素下有不同的内容...在<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>的我的图片块中也是如此。

我向社区提出一些帮助来解决它，我非常害怕它，我没有成功解决它：（。

谢谢。此致

Answer 1

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

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

有时太多的工作和疲倦会开个玩笑。谢谢你。

追加jquery函数加载多个内容

1 个答案: