4

I have a class like this:

<div class="photo" parameter1="custom" parameter2="custom"></div>

I have 4 parameters total.

I need a way to submit this parameters inside my photo div to be used for JQuery code and still have my website W3C compliant. Any ideas?

webmasters
  • 5,663
  • 14
  • 51
  • 78

4 Answers4

13

Set the doctype to HTML5 and use the custom data-* attributes.

<!DOCTYPE HTML>    
...
<div class="photo" data-parameter1="custom" data-parameter2="custom" data-parameter3="custom" data-parameter4="custom"></div>
jimmystormig
  • 10,672
  • 1
  • 29
  • 28
  • 2
    Also just a note that newer versions of jQuery add all `data-*` attributes to the data object... so you can access it like this: `$('.photo').data().parameter1`, etc. – Mottie Feb 27 '11 at 13:42
  • 1
    Yes! Or if you don't want to extract all data-attributes from the element you could use `$('.photo').data('parameter1')`. – jimmystormig May 23 '11 at 06:41
4

If you're using HTML5, you have the option to create custom attributes prefixed with data-*, which allows you to use something like:

<div class="photo" data-parameter1="custom" data-parameter2="custom">...</div>
David Thomas
  • 249,100
  • 51
  • 377
  • 410
1

well your sysntax is incorrect it should end with div

and yes it isn't w3c compliant if you add custom attributes to your tags.

you can select their value as follows

var a=$('.photo').attr('parameter1');
var b=$('.photo').attr('parameter2');
var c=$('.photo').attr('parameter3');
var d=$('.photo').attr('parameter4');

and if you want to add new attributes using jquery you can do it as follows:

$('.photo').attr('newParameter','value');

Hope that works well for u

Baz1nga
  • 15,485
  • 3
  • 35
  • 61
  • Can you cite where it says it's W3C compliant to have custom attributes? – jamesmortensen Feb 27 '11 at 11:34
  • sorry it was a typo.. anyways for more details abt the argument http://stackoverflow.com/questions/994856/so-what-if-custom-html-attributes-arent-valid-xhtml – Baz1nga Feb 27 '11 at 11:38
1

I think you're mismatching some concepts in HTML.

First, div is not a "class", you have a "div element". The div element can have a class attribute.

Second, you must use </div> to close your element, not </class>.

For the problem, another solution is to use hidden element inside your div, for example

<div class="photo">
  <span class="hidden" name="parameter1">...</span>
  <span class="hidden" name="parameter2">...</span>
  <span class="hidden" name="parameter3">...</span>
  <span class="hidden" name="parameter4">...</span>
</div>

with a css style going like this :

.hidden {
  display: none;
}

and finally the jQuery to retrieve the values :

var value = $('div.photo span[name="parameter1"]').html();
krtek
  • 26,334
  • 5
  • 56
  • 84