Question

我知道在jQuery中你可以使用类似$（“。cssClass”）的东西来获取这个类的所有元素。但是在普通的html和javascript中你如何在逻辑上对元素进行分组？例如：

<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"/>

我想创建一个像这样的javascript函数：

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

编辑：由于某些政治原因，我无法使用jQuery或任何框架..我知道它没有意义:)）

Answer 1

对于您在示例中给出的表单元素，<fieldset>是逻辑分组。

您的表单可以（有些人可能会说'应该'）将许多字段集分解为逻辑区域。

一旦你将相关的表单字段划分为逻辑<fieldset>，你就可以通过字段集中的class / id或其他选择器使用你的Javascript来获取它们（也许你抓住所有页面上的字段集等）。

如果您使用Plain Old Javascript而不是框架来通过某种id获取这些项目，那么这将变得更加容易。考虑：

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

使用您的POJ，您可以从以下网址获得所有这些：

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

Answer 2

你可以使用另一个javascript框架吗？有很多：http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

您可以使用以下内容：

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;
}

（从这里：http://www.dynamicdrive.com/forums/showthread.php?t=19294）

如何在不借助CSS类的情况下对HTML元素进行逻辑分组？

2 个答案: