jQuery appendTo带有来自JSON的属性

$.each(tools, function (i, tool) { 
    $("<img>", tool).appendTo($toolbar); 
}); 

//define toolset (JSON, e.g. from database)... 
var tools = [{ 
    "data-id": 1, 
    alt: "sun", 
    title: "sun", 
    src: "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png", 
    "data-description": "sun in photo" 
}, { 
    "data-id": 2, 
    alt: "snow", 
    title: "snow", 
    src: "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Thermometer_Snowflake.png", 
    "data-description": "snow in photo" 
}, { 
    "data-id": 3, 
    alt: "cloud", 
    title: "cloud", 
    src: "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Overcast.png", 
    "data-description": "cloud in photo" 
}, { 
    "data-id": 4, 
    alt: "rain", 
    title: "rain", 
    src: "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Night_Rain.png", 
    "data-description": "rain in photo" 
}];

我正在看一些我第一次看到的jQuery。我发现我相信每个工具会发生什么，并且使用JSON中描述的适当属性创建img标记。如果是这样，我认为这是非常整洁，我想知道这种技术可能在手册或API文档中更详细地描述在哪里？jQuery appendTo带有来自JSON的属性

在此先感谢...

来源

2013-10-02 Giuseppe

这实际上是一个好主意。有关在创建元素时使用对象指定属性的信息，请参阅[this constructor overload]（http://api.jquery.com/jQuery/#jQuery-html-attributes）。 –

代码：

$.each(tools, function (i, tool) { 
    $("<img>", tool).appendTo($toolbar); 
})

让我们的一部分它块：

$.each(tools, function (i, tool) { }); - jQuery each

这是一样的：

for(i = 0; i < tools.length; i++) { 
    var tool = tools[i]; 
}

$("<img>", tool) - jQuery element creator

这是相同的为具有：

$("<img data-id='' src='' alt='' title='' data-description=''>");

以及与每个组参数填满，例如，第一tool（太阳）将是：

$("<img data-id='1' src='http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png' alt='sun' title='sun' data-description='sun in photo'>");

这是th Ë一样：

$("<img>").attr({ 
    "data-id": 1, 
    "alt": "sun", 
    "title": "sun", 
    "src": "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png", 
    "data-description": "sun in photo" 
});

与同为

$("<img>", { 
    "data-id": 1, 
    "alt": "sun", 
    "title": "sun", 
    "src": "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png", 
    "data-description": "sun in photo" 
});

这也正是$("<img>", tool)是怎么一回事

appendTo($toolbar); - jQuery appendTo

简单地追加为结果中的每个对象10阵列，进入$toolbar这可能很简单<div>

来源

2013-10-02 21:34:08 balexandre

谢谢发布。 – Giuseppe

jQuery appendTo带有来自JSON的属性

回答

相关问题