追加jquery函数加载多个内容

我需要一些suggenstions，因为我疯狂了一点关于插入数据在html页面中使用追加jquery函数和ajax请求的问题。追加jquery函数加载多个内容

我有这个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（即我需要）中，但即使在我的IM年龄块在<ul class="pre-wed-list "> </ul>。

我问社区一些有助于解决这个问题，我很害怕它，我没有成功解决它:(。

谢谢。问候

来源

2017-08-23 Zarbat

你在同一个'ul'上同时拥有'pre-wed-list'和id'rudr_instafeed'类： -

'。这就是你看到它的原因。现在让我知道你的观点 –

嗨@AlivetoDie，谢谢你的回答，我不明白哪里是问题，如果我在这个ul元素中class =“pre-wed-list”id =“rudr_instafeed”，append function只需要为#rudr_instafeed工作，它只在这个元素中，而不在其他元素中。谢谢 – Zarbat

你有多个ul具有相同的类和id两个吗？ –

确定我已经解决幸运的是，问题是用于关闭错误的位置，HTML代码如下修正

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

有时太多的工作和疲劳可以使一个笑话。谢谢你了。

来源

2017-08-23 19:17:43 Zarbat

追加jquery函数加载多个内容

回答

相关问题