Замена элементов с JQuery

Question

У меня есть следующий Jquery код:

<p class="article"> 
    <font size='5'><b><span class='articleHeading'>Article1</span></b></font><br/> 
    <span class='myArticle'>11111111111111111</span>  
</p> 
<p class="article"> 
    <font size='5'><b><span class='articleHeading'>Article2</span></b></font><br/> 
    <span class='myArticle'>22222222222222222222</span>      
</p> 
<p class="article"> 
    <font size='5'><b><span class='articleHeading'>Article3</span></b></font><br/> 
    <span class='myArticle'>333333333333</span>         
</p> 

То, что я пытаюсь сделать, это перебрать данных JSON (который успешно работает), и поставить новые данные в пролетах классов ' articleHeading»и 'статьи':

Я попытался это:

 var articleHeadings=$('.articleHeading'); 
       var articles=$('.myArticle'); 
       var z=0; 
       for(var i=0;i<data.length;i++){ 
        var obj = data[i]; 

        for(var key in obj){ 
         ArticleHeadings[z].text(key); 
         articles[z].text(obj[key]); 
         z++; 
        } 
       } 

Я обновил свой вопрос. Я все мои класть пролеты в 2 array..heading, а затем article..and с помощью them..but он не работает

//I want to obtain all the spans with the classes elements and put them in 2 arrays. 
    var articleHeadings=$('.articleHeading'); 
    var articles=$('.myArticle'); 
    //I want to add text to the first element like this.     
        articleHeadings[0].text("1111111111"); 
//There is an element inside..but when using text nothing appears. 

Но когда я использую это:

$('.articleHeading').text("1111111111"); 

В 11111 сделать замените ..lol. Зачем? это потому, что есть мелкая копия по значению? вместо ссылки?

Я нашел решение. Я должен был обернуть каждый элемент моего массива с $():

  var articleHeadings=$('.articleHeading'); 
       var articles=$('.myArticle'); 




       var z=0; 
       for(var i=0;i<data.length;i++){ 
        var obj = data[i]; 

        for(var key in obj){ 

        // alert($(articleHeadings[z]).text()); 
         **$(articleHeadings[z]).text(key);** 
         **$(articles[z]).text(obj[key]);** 
         z++; 
        } 
       } 

Answer 1

Есть несколько способов, вы могли бы пойти по этому поводу, проще всего было бы, вероятно, создать DIV, где вы хотите статьи, ясно, что затем заполнить на основе ввода данных, так что вы можете сделать это динамически с помощью ajax и обновить его каждые несколько секунд или что угодно.

Например, вы могли бы могли это сделать так:

$("#divID").empty(); 
for (var i=0;i<data.length;i++) { 
    var attrName, value; 
    for(var key in data[i]){ 
     attrName = key; 
     value = data[i][key]; 
    } 
    $("#divID").append(
     $("<p />").addClass("article").append(
      $("<span />").addClass("articleHeading").text(attrName), 
      $("<span />").addClass("myArticle").text(value) 
     ) 
    ) 
} 

затем использовать CSS, чтобы обрабатывать размер шрифта и смелый и такой

.articleHeading { 
    font-size: 5px; 
    font-weight: bold; 
} 

Answer 2

Предполагая, что ваш JSON выглядит примерно так:

$data = { 
    "data": [{ 
     "articleHeading": "First heading", 
     "myArticle": "First article body"}, 
    { 
     "articleHeading": "Second heading", 
     "myArticle": "Second article body"}, 
    { 
     "articleHeading": "Third heading", 
     "myArticle": "Third article body"}] 
}; 

Ваш jQuery будет выглядеть примерно так:

$(function(){ 
    $.each($data.data, function(i, data){ 
     var $article = $('.article').eq(i); 
     $article.find('.articleHeading').html(data.articleHeading); 
     $article.find('.myArticle').html(data.myArticle); 
    ​}); 
}); 

Демо: http://jsfiddle.net/Lujew/