JQuery selector return undefined

Question

Я делаю новостные ленты как вещь, которая вращает новости через 7 секунд. Я использую функции JQuery $().slideUp() и $().slideDown().

Вот мой HTML:

<div id='F1' class='Nouvelles' style='background-image:url(../ImagesAnnonces/google_chrome.png); background-size:contain;'> 
    <h2>test</h2> 
    <p>test</p> 
</div> 
<div id='E2' class='Nouvelles' style='background-image:url(../ImagesAnnonces/images.jpeg); background-size:contain;'> 
    <h2>test</h2> 
    <p>test</p> 
</div> 
<div id='F3' class='Nouvelles' style='background-image:url(../ImagesAnnonces/); background-size:contain;'> 
    <h2>test 2 FR</h2> 
    <p></p> 
</div> 
<div id='F4' class='Nouvelles' style='background-image:url(../ImagesAnnonces/asdfgfhjkl.jpeg); background-size:contain;'> 
    <h2></h2> 
    <p></p> 
</div> 

Вот что я сделал до сих пор:

//This is just a AJAX call that generate all the '.Nouvelle' which translate from french to news. 

$(document).ready 
     (function(){ 
      $.ajax(
      { 
       url:"handlingPub.php", 
       type:"GET", 
       dataType:"text", 
       contentType:"application/x-www-form-urlencoded;charset=UTF-8", 
       success:function(code_html, status) 
          { 
           $("#divPub").append(code_html); 
           $(".Nouvelles").css(
            { 
             height:"90px", 
             display:"none", 
             padding:"0px", 
             margin:"10px", 
             overflow:"hidden", 
             border:"solid white 2px" 
            }); 
           $('.Nouvelles[id^="F"]:lt(1)').css("display", "block"); 
           $(".Nouvelles h2").css({padding:"0px", margin:"0px"}); 
          } 
      }); 

//the problem seems to be here... 
//Get the first id 
      var id = $('.Nouvelles[id^="F"]').first().attr('id').substring(1); 
      alert(id);//This return 'undefined'... 
//Every 7 sec. 
      var int = self.setInterval 
      (function(){ 
       var max = 0; 
       //Get the number of news (I know I could use size() or length I will change it later)     
       $('.Nouvelles[id^="F"]').each(function(){max++;}); 
       if(max > 1)//If there is more than 1 news 
       {      
         $(".Nouvelles[id=F"+id+"]").slideUp();//slide it up 
         if(id >= max)//If the id of the news is bigger than the last one set it to the first 
         { 
          id = $('.Nouvelles[id^="F"]:first').attr('id').substring(1); 
         } 
         else//else go get the next 
         { 
          id = $('.Nouvelles[id^="F"]').next('.Nouvelles[id="F'+id+'"]').attr('id').substring(1); 
         } 

         $('.Nouvelles[id="F'+id+'"]').slideDown();//slide the next news down 
       } 
      } 
      , 7000); 
     }); 

Каждый».Nouvelles' имеют уникальные идентификаторы, либо начать с 'F' на французский или «E» для английского. Я хочу повернуть и отобразить ТОЛЬКО французские на данный момент. Французские и английские новости будут чередоваться случайным образом. Таким образом, следующий брат «F1» мог когда-нибудь быть «F2» или «E2».

Проблема, которую я имею с этой линией здесь:

//the problem seems to be here... 
//Get the first id 
      var id = $('.Nouvelles[id^="F"]').first().attr('id').substring(1); 
      alert(id);//This return 'undefined'... 

Я не могу получить идентификатор. Если я alert($('.Nouvelles[id^="F"]').first()), он возвращает объект. Но если я alert($('.Nouvelles[id^="F"]').first().attr('id')), он возвращается не определен. Как идентификатор может быть неопределенным, если в селекторе JQuery я специально запрашиваю элемент с идентификатором, начинающимся с 'F' ???

Кто-нибудь знает, где я ошибаюсь ??

Answer 1

Поскольку вы добавляете элементы в вызов ajax, ваш селектор не получает никаких элементов на ready.

Вы получите объект jQuery, который не будет содержать элементов, но будет предупреждать объект и не иметь атрибута id.

Сделайте console.log($('.Nouvelles[id^="F"]').first().attr('id')) и осмотрите объект. предупреждение не должно использоваться для отладки.