javascript/jquery с использованием измененного идентификатора элемента

Question

Я пытался автоматизировать процесс загрузки статей на своем веб-сайте, но строка $(tytul).html(data); не работает должным образом. Интересно, есть ли способ заставить это работать?

var numboart = 3; 

$(document).ready(function(){ 

    for(i=0;i<numboart;i++) 
    { 
    var tytul = new String("\"#artykl"+i+"\""); 
    $.ajax({ 
      url : "../articles/art"+i+".txt", 
      dataType: "text", 
      success : function (data) { 
       $(tytul).html(data); 
      } 
     }); 
     } 

}); 

Я пытаюсь поместить содержимое текстовых файлов в '<div>' элементы, которые есть идентификаторы # artykl1, # artykl2, # artykl3, ... и так далее.

  <div id="artykl1" class="post"> 




      </div> 

      <div id="artykl2" class="post"> 




      </div> 

      <div id="artykl3" class="post"> 




      </div> 

Answer 1

$.ajax() является асинхронным, поэтому нет никаких гарантий, что на каждом цикле вы инъекционное содержание внутри .post. Есть некоторые решения, как использование async: false, используйте closure или вызвать функцию (см код):

var numboart = 3; 

$(document).ready(function(){ 

    for(i=0;i<numboart;i++){ 
     loadContent(i); 
    } 

    loadContent = function(i){ 
     var tytul = "#artykl" + i; 
     $.ajax({ 
      url : "../articles/art"+i+".txt", 
      dataType: "text", 
      success : function (data) { 
       $(tytul).html(data); 
      } 
     }); 
    }; 
}); 

При этом вы убедитесь, что i правильно на каждом $.ajax() вызове

UPDATE Если это не работает, попробуйте поместить функцию loadContent за пределы $(document).ready()

Answer 2

Ваше динамическое создание идентификатор не является правильным, оно должно быть только

var tytul = "#artykl"+i; 

сконструированных селектор, как "#artykl1", вместо #artykl1, который является недействительным селектором (вы должны иметь ошибку как Uncaught Error: Syntax error, unrecognized expression: "#artykl1" в консоли)

Также у вас есть проблемы с wrong use of a closure variable in a loop

var numboart = 3; 

$(document).ready(function() { 
    for (i = 0; i < numboart; i++) { 
     (function (i) { 
      var tytul = new String("#artykl" + i); 
      $.ajax({ 
       url: "../articles/art" + i + ".txt", 
       dataType: "text", 
       success: function (data) { 
        $(tytul).html(data); 
       } 
      }); 
     })(i); 
    } 
}); 

---

Кроме того, я думаю, что код может быть упрощен

jQuery(function ($) { 
    $('.post').each(function (i, el) { 
     $(this).load("../articles/art" + i + ".txt") 
    }) 
});