Question

我遇到以下问题。我正在尝试创建自己的一些画廊，但我现在正处于学习jQuery的早期阶段，所有这些数组都很难理解......

在我的CMS中，我为所有元素创建了以下形式的循环输出：

<img class="content" src="path/to/image1.jpg" />
<p class="title">Description1</p>
<a class="link_img" href="http://www.somesite1.com" target="_blank">Link to Site1</a>

<img class="content" src="path/to/image2.jpg" />
<p class="title">Description2</p>
<a class="link_img" href="http://www.somesite2.com" target="_blank">Link to Site2</a>

但是我需要将它带入这种形式（对于我的jQuery游乐场）：

var myDemoImages = [
    { src: 'path/to/image1.jpg', title: 'Description1', subtitle: 'http://www.somesite1.com' },
    { src: 'path/to/image2.jpg', title: 'Description2', subtitle: 'http://www.somesite2.com' }
];

我尝试了类似下面的内容，但它混合了价值观，使价值倍增。

$('img.content').each(function() {
    for (var k = 0; k < this.attributes.length; k++)
    {
        var attr = this.attributes[k];
        if (attr.name != 'class')
            myImages.push("src:'"+attr.value+"'");
    }
});

p标签中我需要的“值”实际上不是一个值，但不应该像这样的工作吗？

myImages.push(this.innerHTML);

Answer 1

我会做类似的事情：

<div class="demoImage">
<img class="content" src="path/to/image1.jpg" /> 
<p class="title">Description1</p>
<a class="link_img" href="http://www.somesite1.com" target="_blank">Link to Site1</a>
</div>

请注意，我在元素周围添加了div，以便更轻松地访问它们。

和jQuery：

var fos=$('.demoImage').map(function () {
    var $this=$(this);
    return {
        src: $this.find('img.content').attr('src'),
        title: $this.find('p.title').html(),
        subtitle: $this.find('a.link_img').attr('href'),
    };
}).get();

jsFiddle Demo

该解决方案使用.map()函数，这是一个很好的工具，可以从jQuery集合中创建任何数组。

Answer 2

要从p标记获取HTML内容，请使用$("p").html()方法。
要获取内部文字，请使用.text()方法： - ）

使用jQuery以特定形式从HTML创建数组

2 个答案: