0

I'm making dynamic gallery

here is part of my code

<li id="pic_0">
 <img src="http://localhost/wpff/wp-content/themes/twentyeleven/images/family/small/012_family-portrait_people_sea.jpg" name="012_family-portrait_people_sea.jpg" horz="y">
</li>
<li id="pic_1">
 <img src="http://localhost/wpff/wp-content/themes/twentyeleven/images/family/small/011_family-portrait_people_sea.jpg" name="011_family-portrait_people_sea.jpg" horz="y">
</li>
<li id="pic_2">
 <img src="http://localhost/wpff/wp-content/themes/twentyeleven/images/family/small/010_family-portrait_mother-son_sea.jpg" name="010_family-portrait_mother-son_sea.jpg" horz="y">
</li>

file names generated on the fly. I want to get "horz" value knowing filename (name value stored in Bigpic variable) using jquery

var horz = $('name='+Bigpic).attr('horz');

Cannot get it right! A little help please.

Thanks. Alexei

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
aleXela
  • 1,270
  • 2
  • 21
  • 34
  • "on the fly", so they are dynamic, in that case, which "event" are you needing that variable `horz` for? – SpYk3HH Jul 08 '13 at 20:12
  • 1
    Well, you didn't provide a valid selector. Look at the syntax for attributes selectors: http://api.jquery.com/attribute-equals-selector/. – Felix Kling Jul 08 '13 at 20:12
  • 1
    `attribute selectors` must be encased between `[]`. – Ohgodwhy Jul 08 '13 at 20:13
  • FYI, I don't think the `name` attribute is valid for `img` elements (not to mention `horz`). Consider using `data-*` attributes. If you decide to do this, have a look at http://stackoverflow.com/q/2487747/218196. – Felix Kling Jul 08 '13 at 20:14

1 Answers1

3

Your selector is incorrect, Try this way after the element has been created:

var horz = $('[name="'+Bigpic + '"]').attr('horz');

Also consider changing the attribute name horz to data-horz and use data api to retrieve the value.

var horz = $('[name="'+Bigpic + '"]').data('horz');

Also make sure to enclose the attribute value in double quotes, since it has some reserved chars (.) and for the standard way of using it.

Fiddle

PSL
  • 123,204
  • 21
  • 253
  • 243
  • gj, i was gettin it, but you gots it, fyi, the `"` arn't really needed – SpYk3HH Jul 08 '13 at 20:16
  • @alexela He means you rewrite your `img` tag builder to include the `attribute` for `data-horz="y"` – SpYk3HH Jul 08 '13 at 20:17
  • This one i get. But will this may difference? not horz but data-horz? – aleXela Jul 08 '13 at 20:17
  • @alexela see the fiddle updated. – PSL Jul 08 '13 at 20:17
  • `Also make sure to enclose the attribute value in double quotes, since it has some reserved chars and the standard way of using it.` ... where? I really don't see the need for the double quotes, lol – SpYk3HH Jul 08 '13 at 20:18
  • horz is not a valid html attribute, your html will fail validation. custom attributes needs to be prefixed with data-* – PSL Jul 08 '13 at 20:18
  • @SpYk3HH just remove double quotes and see for yourself. `.` is present in the selector. – PSL Jul 08 '13 at 20:18
  • I'm not getting the result. undefined variable. `var horz = $('[name="'+Bigpic + '"]').attr('horz');` – aleXela Jul 08 '13 at 20:19
  • 1
    @alexela see the fiddle closely. what is Bigpic by the way. – PSL Jul 08 '13 at 20:19
  • PSL - understand. thanks! – aleXela Jul 08 '13 at 20:19
  • @PSL yea i saw that, lol, that's odd, i've never double quoted my name tags in a selector and never had a problem. First time for everything! First time i've seen that! lol – SpYk3HH Jul 08 '13 at 20:20
  • @SpYk3HH infact you should always quote the attribute values while using attribute selector, jquery docs itself say that as the standard. – PSL Jul 08 '13 at 20:20
  • @PSL I know i know, i've read them ... but i get like a .3 second increase when i dont! :-P j/k it's just an old habbit. Old habbit of not using double quotes unless absolutely necessary due to the extra parse time in some languages. – SpYk3HH Jul 08 '13 at 20:22
  • @SpYk3HH yeah... lol... :) – PSL Jul 08 '13 at 20:23
  • Yes. I also used `.attr('data-horz')` to setting values since `.data(horz, value)` just nut working (also searched for solution on the web). Selection itself working. So big thanks. My problem was also the place of getting values. I didn't noticed that I'm setting values in function that called after this code (`var horz...`) – aleXela Jul 09 '13 at 06:57
  • @alexela if you set `.data(horz, value)` then you must access the value as `.data(horz)` not as `.attr('data-horz')` that could be your problem. But if this helped you in anyways do remember to mark as answer and let me know if you have any issues. – PSL Jul 09 '13 at 15:37
  • if i'm declaring it as .data(horz,value) it not wokring. only as .attr('data-horz',value) – aleXela Jul 11 '13 at 14:12