Databases
StackOverflow2013
Postsdbo
POHow can I select an img placed within a span with appendChild?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I select an img placed within a span with appendChild?
    primarykey
    data
    text
    <p>I'm using picturefill.js (Scott Jehl): <a href="https://github.com/scottjehl/picturefill/blob/master/picturefill.js" rel="nofollow">https://github.com/scottjehl/picturefill/blob/master/picturefill.js</a></p> <p>Here's how I have it setup, (some code omitted b/c it was just more media query stuff) using span tags and data attributes as in his documentation:</p> <pre><code>&lt;figure&gt; &lt;a href='http://www.casaromeromexican.com'&gt; &lt;span id="picture" data-picture data-alt="Casa Romero Mexican website"&gt; &lt;span data-src="img/casa-romero-mexican.jpg"&gt;&lt;/span&gt; &lt;span data-src="img/casa-romero-mexican@2x.jpg" data-media="(min-device-pixel-ratio: 2.0)"&gt;&lt;/span&gt; &lt;span data-src="img/casa-romero-mexican-md.jpg" data-media="(min-width: 768px") &lt;/span&gt; // and so on... </code></pre> <p>The correct img is being loaded and placed on the page, as expected. Here's is a snippet of the generated HTML:</p> <pre><code>&lt;span data-src="img/casa-romero-mexican-md.jpg" data-media="(min-width: 768px)"&gt;&lt;img alt="Casa Romero Mexican website" src="img/casa-romero-mexican-md.jpg"&gt;&lt;/span&gt; </code></pre> <p>What I'd like to do is add a class to whichever img tag ends up getting generated.</p> <p>However, I'm not even able to select the img that is appended! Here's what I'm working with:</p> <pre><code>alert(($('#picture').children().find('img').size())); </code></pre> <p>This returns 0, even though the image is on the page. I am expecting it to return a size of 1, b/c based on the media queries, 1 of the images is appended to the page with picturefill.</p> <p>Just to be sure that there wasn't issues with the DOM loading, I placed picturefill.js in the header (even though JS should go in footer most of the time), and even did this:</p> <pre><code>$(document).ready(function() { alert('ready!'); alert(($('#picture').children().find('img').size())); }); </code></pre> <p>Still doesn't seem to find the img. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCodeFinity
    1. USCodeFinity
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COhow about `$('#picture img')` and if you want the last one just `$('#picture img:last')`
      singulars
      1. POHow can I select an img placed within a span with appendChild?
      1. USHussein Nazzal
    2. COand you have span tags not img tags .. so why are you search for something that isnt there ..
      singulars
      1. POHow can I select an img placed within a span with appendChild?
      1. USHussein Nazzal
    3. COAre you loading whichever file houses the `alert()` before `picturefill.js` in the DOM?
      singulars
      1. POHow can I select an img placed within a span with appendChild?
      1. USelkirkmo
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload