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”和“article”的跨度内的新数据：

我试过了：

     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个数组......标题和文章......然后使用它们..但它不起作用

 //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

假设您的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/

Answer 2

有几种方法可以解决这个问题，最简单的方法可能就是创建一个你想要文章的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;
}

用jquery替换元素

2 个答案: