Создайте массив из HTML в определенной форме с помощью jQuery

#jquery #html #arrays

#jquery #HTML #массивы

Вопрос:

У меня возникли проблемы со следующей частью. Я пытаюсь создать какую-то собственную галерею, но я нахожусь в самом начале изучения 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);

Ответ №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

Решение использует .map() функцию, которая является отличным инструментом для создания любых массивов из ваших коллекций jQuery.

1. Очень хороший элегантный способ сделать это. Вас не раздражает, что jQuery делает так много вещей с помощью .get — он может извлекать элемент X из соответствующего набора, получать последний отображенный массив (о котором я даже не знал после вашего примера) или быть запросом ajax get. Я думаю, что это настолько фрагментировано!

2. @Gary Green Наоборот, мне это нравится. get также имеет много значений в английском языке, значение в большинстве случаев зависит от контекста. В конце концов, Javascript — это язык программирования, поэтому я нахожу это интуитивно понятным. Я бы не хотел писать getLastMappedArray или getElement и т.д.

3. Очевидно, что это короче в написании, но getElement etc для меня более нагляден и интуитивно понятен. Также сложно найти правильную страницу для .get из API в контексте, в котором вы хотите ее использовать.

4. @Gary Green Тогда, похоже, все зависит от личных предпочтений :).

5. Верно, попробуйте ввести «get» в поиск, и вы получите страницу для удаления. Также вы не увидите упоминания о .get для использования в .map — оно появляется только на .map странице. Заставляет задуматься, где еще .get может быть неоднозначно использовано.

Ответ №2:

Чтобы получить HTML-содержимое из p тега, используйте $("p").html() метод.
Чтобы получить внутренний текст, используйте .text() метод 🙂