CODEWITHSUNDEEP
javascripthtml
Perpetualcoder
Perpetualcoder

Reputation: 13591

How can you logically group HTML elements without taking the help of CSS classes?

I know that in jQuery you can use something like $(".cssClass") to get all elements with this class. However in plain html and javascript how do you group elements logically? For example:

<input id="fee1" data-id="1" data-group="Fees" type="text" value="$15.00"/>
<input id="fee2" data-id="2" data-group="Fees" type="text" value="$25.00"/>
<input id="fee3" data-id="3" data-group="Fees" type="text" value="$35.00"/>

I want to create a javascript function like this:

function GetByDataGroup(dataGroup){
/*  returns something like [[1,"$15.00"],[2,"$25.00"],[3,"$35.00"]]*/
}

EDIT : Due to some political reasons I cant use jQuery or any framework..i know it doesnt make sense :)

Upvotes: 2

Views: 5269

Answers (2)

Jamie Dixon
Jamie Dixon

Reputation: 54001

In the case of form elements like you've given in your example, the <fieldset> is the logical grouper.

Your form can (and some might go as far as to say 'should') have many fieldsets breaking up your form into logical areas.

Once you have the relevant form fields divided up into the logical <fieldset>'s you can grab these using your Javascript either through a class/id on the fieldset, or some other selector (perhaps you're grabbing all fieldsets on the page etc).

This makes it a lot easier if you're using Plain Old Javascript rather than a framework to grab those items by some kind of id. Consider:

<fieldset id="contactDetails">
  <input ... />
  <input ... />
  <input ... />
</fieldset>

Using your POJ you can get all of these from:

var contactDetails = document.getElementById('contactDetails');

Upvotes: 3

zsalzbank
zsalzbank

Reputation: 9857

Can you use another javascript framework? There are many: http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

You could use something like this:

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag); // use "*" for all elements
    var pattern = new RegExp('\\b'+searchClass+'\\b');
    for (var i = 0; i < els.length; i++)
         if ( pattern.test(els[i].className) )
             classElements[classElements.length] = els[i];
    return classElements;
}

(from here: http://www.dynamicdrive.com/forums/showthread.php?t=19294)

Upvotes: 1

Related Questions