Question

I have a foreach loop in jQuery going through each ‘div.panel’, I need to access the img src of the image within this div…

HTML:

<div class="panel" title="Sean Gay">
  <div class="wrapper"><img src="/Media/people/SeanGay.jpg" alt="Sean Gay" class="person">
      <div class="vcard"><span class="fn">Sean Gay</span> <span class="title">Chief Storeman</span>
      </div>
</div>
</div>

jQuery:

jQuery(this).find("div.panel").each(function(n) {
     var title = jQuery(this).attr("title");

This gets me the title of the panel, within this loop I need the src of the image in the wrapper without the .jpg extension.

How can I do this?

Answer 1

This is just basic traversal and string manipulation:

jQuery(this).find("div.panel").each(function(n) {
     // Get the panel as a jQuery instance
     var panel = jQuery(this);

     // Get its title
     var title = panel.attr("title");

     // Find the first image and get its `src` property; note that here
     // I'm assuming there *will* be one. If that assumption isn't true,
     // cache the img lookup and use `if (img[0])` to guard.
     var src = panel.find("img")[0].src;

     // Remove ".jpg" at the end if it's there
     src = src.replace(/\.jpg$/i, "");
});