Как я могу выбрать img, помещенный в промежуток с appendChild?

Question

Как я могу выбрать img, помещенный в промежуток с appendChild?

0

Я использую picturefill.js(Scott Jehl): /picturefill.js

Здесь, как у меня есть настройка, (в некотором коде пропущен b/c это просто больше материала для медиа-запросов), используя теги span и атрибуты данных, как в его документации:

<figure>
    <a href='http://www.casaromeromexican.com'>
        <span id="picture" data-picture data-alt="Casa Romero Mexican website">
        <span data-src="img/casa-romero-mexican.jpg"></span>
        <span data-src="img/[email protected]" data-media="(min-device-pixel-ratio: 2.0)"></span>
        <span data-src="img/casa-romero-mexican-md.jpg" data-media="(min-width: 768px") </span> 
// and so on...

Правильный img загружается и помещается на страницу, как и ожидалось. Вот фрагмент сгенерированного HTML:

<span data-src="img/casa-romero-mexican-md.jpg" data-media="(min-width: 768px)"><img alt="Casa Romero Mexican website" src="img/casa-romero-mexican-md.jpg"></span>

То, что я хотел бы сделать, это добавить класс к тому, что img-тег заканчивается получением.

Тем не менее, я даже не могу выбрать добавленный img! Вот с чем я работаю:

alert(($('#picture').children().find('img').size()));

Это возвращает 0, даже если изображение находится на странице. Я ожидаю, что он вернет размер 1, b/c на основе медиа-запросов, 1 из изображений добавляется на страницу с помощью picturefill.

Чтобы быть уверенным, что не было проблем с загрузкой DOM, я поместил picturefill.js в заголовок (хотя JS должен был ходить в нижнем колонтитуле большую часть времени), и даже сделал это:

$(document).ready(function() {
        alert('ready!');
        alert(($('#picture').children().find('img').size()));
        });

Кажется, все еще не найден img.

CodeFinity 04 окт. 2013, в 01:22

Источник

0

как насчет $('#picture img') и если вам нужен последний, просто $('#picture img:last')
Hussein Nazzal 03 окт. 2013, в 22:31
0

и у вас есть теги span, а не img-теги .. так почему вы ищете что-то там, что нет ..
Hussein Nazzal 03 окт. 2013, в 22:34
0

Загружаете ли вы какой-нибудь файл, в котором находится alert() перед picturefill.js в DOM?
elkirkmo 03 окт. 2013, в 22:35
0

@HusseinNazzal Picturefill генерирует тег img внутри span . Он добавил, как выглядит пользовательский HTML, и у него есть фактический img .
elkirkmo 03 окт. 2013, в 22:38
0

@elkirkmo Я добавил готовый документ и еще одно предупреждение, но он все равно не находит img. У меня также есть файл picturefill.js (большую часть времени я помещаю JS в нижний колонтитул). Итак, я не думаю, что «время» является проблемой.
CodeFinity 03 окт. 2013, в 22:38
0

тогда просто $('#picture span img')
Hussein Nazzal 03 окт. 2013, в 22:40
0

@HusseinNazzal Нет, по-прежнему не выбирает img. В предупреждении все еще говорится 0, как будто он не понимает, что в этом диапазоне есть тег img! Тьфу!
CodeFinity 03 окт. 2013, в 22:44
0

я думаю, что это делает jsfiddle.net/C58Wn/1
Hussein Nazzal 03 окт. 2013, в 22:48
0

@HusseinNazzal Я понимаю, что вы имеете в виду. Однако вы используете это для ситуации, когда <img> уже находится в HTML, и в этом случае проблем нет. В файле picturefill.js тег <img> динамически добавляется в HTML после загрузки страницы, и по некоторым причинам это затрудняет его выбор. Если бы это был просто какой-то HTML с уже существующим <img>, ваше решение было бы хорошо.
CodeFinity 03 окт. 2013, в 23:16
0

В документации github говорится, что вы можете назначить каждому span свой собственный класс. Вы пытались сделать это, а затем вызвать $ (span.class img)?
elkirkmo 03 окт. 2013, в 23:40
0

Я видел это в документах и могу манипулировать через CSS без особых проблем. Во всяком случае, как оказалось ... один из ваших предыдущих комментариев был правильным. Даже DOM был готов (с «document ready»), самого img не было на странице. Когда я на самом деле использовал «загрузку окна», он работал просто отлично! Прочтение этого помогло мне понять: learn.jquery.com/using-jquery-core/document-ready
CodeFinity 03 окт. 2013, в 23:43

Показать ещё 9 комментариев

Теги:

javascript

jquery

picturefill

1 ответ

Ещё вопросы

как насчет $('#picture img') и если вам нужен последний, просто $('#picture img:last')
и у вас есть теги span, а не img-теги .. так почему вы ищете что-то там, что нет ..
Загружаете ли вы какой-нибудь файл, в котором находится alert() перед picturefill.js в DOM?
@HusseinNazzal Picturefill генерирует тег img внутри span . Он добавил, как выглядит пользовательский HTML, и у него есть фактический img .
@elkirkmo Я добавил готовый документ и еще одно предупреждение, но он все равно не находит img. У меня также есть файл picturefill.js (большую часть времени я помещаю JS в нижний колонтитул). Итак, я не думаю, что «время» является проблемой.
@HusseinNazzal Нет, по-прежнему не выбирает img. В предупреждении все еще говорится 0, как будто он не понимает, что в этом диапазоне есть тег img! Тьфу!
я думаю, что это делает jsfiddle.net/C58Wn/1
@HusseinNazzal Я понимаю, что вы имеете в виду. Однако вы используете это для ситуации, когда <img> уже находится в HTML, и в этом случае проблем нет. В файле picturefill.js тег <img> динамически добавляется в HTML после загрузки страницы, и по некоторым причинам это затрудняет его выбор. Если бы это был просто какой-то HTML с уже существующим <img>, ваше решение было бы хорошо.
В документации github говорится, что вы можете назначить каждому span свой собственный класс. Вы пытались сделать это, а затем вызвать $ (span.class img)?
Я видел это в документах и могу манипулировать через CSS без особых проблем. Во всяком случае, как оказалось ... один из ваших предыдущих комментариев был правильным. Даже DOM был готов (с «document ready»), самого img не было на странице. Когда я на самом деле использовал «загрузку окна», он работал просто отлично! Прочтение этого помогло мне понять: learn.jquery.com/using-jquery-core/document-ready

CodeFinity · Accepted Answer · 2013-10-03T21-35-00.000Z

http://learn.jquery.com/using-jquery-core/document-ready/

Прочитав это, я понял, почему jQuery не нашел img. В этом случае необходимо было использовать $ (window).load(function() {...}). Это не будет запускать скрипт до загрузки всей страницы, в отличие от $ (document).ready(), который ожидает только DOM.

Другими словами, $ (document).ready() отлично работает в большинстве случаев, но не при ожидании элементов мультимедиа, которые могут потребоваться больше времени для загрузки и/или должны быть получены с помощью запроса!