Question

我正在尝试从标签或其他任何内容组织的纯文本中获取特定文本;然后加载现有div或动态创建一个div来加载它。

不知道用json是否可以

我尝试过像这样创建一个.json文件data_prod.js：

{"articles":
        [
            {
                "title1":"bla bla bla"
            },
            {
                "title2":"bla bla bla"
            },
            ...
        ]
}

在我的html代码中我写了这个函数：

    $.getJSON("data_prod.js",function(data)
        {
            var div_data = data.title1;
            $(div_data).appendTo("#tt_mn");
        });

我想在这些情况下加载的内容只是名为#tt_mn的div中的title1

出现了问题

现在我已经修改了。

data.json

{
   "articles": [{ "title": "fresa" }, { "title": "limon" }, { "title": "naranja" } ]
}

test_json.html

<div id="op">push me</div>  
<div id="tt_mn" data-articleidx="1"></div>
<script>
$('#op').live("click", function() {
    // get the index of the article for which the title should be obtained
    var idx = $(this).data('articleidx');
    $.getJSON("data.json", function(data) {
        // be safe and the data parameter conformity prior to extracting the title
        if (data && data.articles && idx < data.articles.length) {
            $("<div>" + data.articles[idx].title + "</div>").appendTo("#tt_mn");
        }
    });
}); 
</script>

EXAMPLE

Answer 1

首先通过对所有文章使用相同的title属性来修复您的JSON，而不是使用不同的属性名称（title1，title2，...）：

{ 
    "articles": 
    [
        {
            "title":"bla bla bla"
        },
        {
            "title":"bla bla bla"
        },
        ...
    ] 
}

然后您可以遍历这些文章并使用title属性：

$.getJSON("data_prod.js",function(data) {
    $.each(data.articles, function(index, article) {
        $('<div/>', {
            text: article.title
        }).appendTo("#tt_mn");
    });
});

更新：

如果您想保留JSON的原始结构并仅加载title1，则可以执行以下操作：

$.getJSON("data_prod.js", function(data) {
    for (var i = 0; i < data.articles.length; i++) {
        var article = data.articles[i];
        for (var prop in article) {
            if (article.hasOwnProperty('title1')) {
                var title = article.title1;
                $('<div/>', {
                    text: title
                }).appendTo("#tt_mn");
                break;
           }
        }
    }
});

Answer 2

您应首先更改一下您的json，以便所有项目具有相同的“title”属性：

{
   "articles": [{ "title": "title 1" }, { "title": "title 2" }, ... ]
}

然后，在.getJSON（）函数的回调中，遍历所有项目并生成带有标题值的html标记。

我认为应用标记的最有效方法是构建一个表示所需标记的字符串数组，并将其全部追加到一起。对于jquery .each（）或.map（），for循环也会更有效。

$.getJSON("data_prod.js", function(data) {
    var titles = [];
    for (var i=0; i<data.articles.length;i++) {
        titles.push("<div>" + data.articles[i].title + "</div>");
    }
    $(titles.join('')).appendTo("#tt_mn");
});

<强> EXAMPLE

修改

因此，如果您想通过单击按钮显示一个特定标题，则可以添加“data-”属性，指定您想要获得标题的文章：

<button data-articleidx="1">Get title</button>

然后：

$('button').click(function(e) { // get the index of the article for which the title should be obtained var idx = $(this).data('articleidx'); $.getJSON("data_prod.js", function(data) { // be safe and the data parameter conformity prior to extracting the title if (data && data.articles && idx < data.articles.length) { $("<div>" + data.articles[idx].title + "</div>").appendTo("#tt_mn"); } }); });

我仍然建议您更改json以使标题具有相同的属性名称。我想不出他们为什么实际上是“title1”，“title2”......

Answer 3

这是一个建议：

1）创建容器：

加载内容（文字/图片）

2）为我们的脚本添加一个非常具体的属性：

＆lt; div data-url =“mycontect.txt”＆gt;加载内容（文字/图片）＆gt;

3）添加脚本以加载动态内容：

 <script type="text/javascript">
$(function()){
     $('[data-url]').each(function(){

         // just making sure we have the correct instance.
         var $elem = $(this);
         // Get the url
         var url = $(this).attrr('data-url');


         $.get(url, function(html) {
             /// adding the content to the container.
             $elem.html(html); 
         });
     });

};

`

jquery从文件加载特定内容

3 个答案: