Display result for each

JavaScript
1

Hi,

I have the following code which grabs the file name of an image and then displays the result inside a div with an ID

However, what I want to do is to display the result in every div on the page with a class of .image. How would I do this?

Thanks!


var pcode = $('.image img').attr('src').replace(/\\.jpg/, '').split('/').slice(-1);

document.getElementById('prod').innerHTML += pcode;
2

Hi,

If you are including jQuery then you might as well use it:

var pcode = $('.image img').attr('src').replace(/\\.jpg/, '').split('/').slice(-1); 
$('.image').html(pcode);
3

Thanks. I now have this:


$(".image img").each( function() {
   var caption = jQuery(this).attr('src').replace(/\\.jpg/, '').split('/').slice(-1);
  $(this).after('<div class="prod">' + caption + '</div>');
 $(this).next('.image').html(caption);
 $(this).attr('src','');
});

It kind of works, but it misses out the last image on my page for some reason. I guess this is a .each() issue.

Any ideas what I have wrong?

Thanks

4

Hi,

[s]This:

$(".image img")

will select anything with a class of “image” and all img tags on the page.
Is this the desired behaviour?[/s]

5

I am tring to select all the images within a div with a class of .image

6

Sorry, my mistake. I misread things.

$(".image img")

will do exactly what you want.

I’ll have a look at the code and post back here shortly.

7

So, I had a play around with this and it works as expected for me.

Could you post a link to a page where I can see this not working?

8

I have uploaded a screenshot of what is happening:
http://postimg.org/image/xp3hog1vl/

Basically, the output is duplicating itself as it starts and reduces the output as it goes down the page. Also, the last image doesn’t have an output at all.

Any ideas what could be causing this?

Thanks

9

This doesn’t seem right to me:

$(this).next('.image').html(caption);

but without seeing some HTML it is hard to say what is going on.
Can you post a link to your site?

10

This is what is outputted in the HTML


<div class="image">
<img border="0" src="images/pics/IMAGE1.jpg"><div class="prod">IMAGE1</div>
<img border="0" src="images/pics/IMAGE1.jpg"><div class="prod">IMAGE1</div>
<img border="0" src="images/pics/IMAGE1.jpg"><div class="prod">IMAGE1</div>
<img border="0" src="images/pics/IMAGE1.jpg"><div class="prod">IMAGE1</div>
</div>
11

Hi there,

If you cannot link to a page where I can see this, could you then use JSFiddle to create a standalone example of your problem.

You can get the address from my signature.

12

I have created this and it seems to work:

However, the page that I am using my code on is a search results page, so in theory it is duplocating the script on the page for however many times an individual result is displayed.

13

Funny how that seems to happen :slight_smile:

But seriously, thanks.
It is much easier to help someone if you can both look at the same thing.

So let’s come at this another way and see if we can solve it.

You seem to have this structure:

<table class="table">
    <tr>
        <td class="image">
            <div class="picture">
                <img src="http://s29.postimg.org/60u436ooj/image1.jpg" />
            </div>
            <div class="prod"></div>
        </td>
        </td>
    </tr>
</table>

It is repeated several times on your page. Correct?

Am I also correct in thinking that all you want to do is to grab the file name, remove the extension and insert the file name into the proceeding div.prod?

This would mean that under the hood you would end up with:

<table class="table">
    <tr>
        <td class="image">
            <div class="picture">
                <img src="http://s29.postimg.org/60u436ooj/image1.jpg" />
            </div>
            <div class="prod">image1</div>
        </td>
        </td>
    </tr>
</table>

<table class="table">
    <tr>
        <td class="image">
            <div class="picture">
                <img src="http://s29.postimg.org/60u436ooj/image2.jpg" />
            </div>
            <div class="prod">image2</div>
        </td>
        </td>
    </tr>
</table>

Did I get that right?

14

Hi,

Thanks. Yep that is exactly what I want to do :slight_smile:

15

Hey,

This should work:

$(".picture img").each(function () {
    var caption = $(this).attr('src').replace(/\\.jpg/, '').split('/').pop();
    $(this).parent().next().text(caption);
});

fiddle

16

Thanks :slight_smile: I think it worked - it out puts it in the HTML, but I can’t see it on the page - I guess it must need styling up.

I’ll let you know how I get on.

Many thanks

17

No probs.

Let me know when it is working and we can find a better way to get the image name.
At the moment it will break if the ending is not .jpg, but what about .jpeg, .JPG, .png etc.

18

Ok, I have now got it to display, but it is not outputting the last one. Do you know what would cause that?

Thanks!

19

Not without seeing the page, sorry.
If you want to PM me the link if you don’t want to post it here, then that’s fine.

20

I think it is because I need to create the image codes as an array.

I have found this here:
http://stackoverflow.com/questions/1399004/how-to-catch-last-iteration-inside-each-in-jquery

This bit sounds interesting:

“When iterating over an object, there’s no such thing as a “last” property, because the order of properties is undefined by design.”

Would creating them as an array fix things?