开发者

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" 开发者_JAVA百科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 :)


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');


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)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜