追加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函數加載多個內容

回答

相關問題