如何构建一个div中所有输入类的数组？

我无法确定如何在页面加载中设置数组，该数组包含boardinput的ID中的每个div内的每个输入的所有类名称和id名称。如何构建一个div中所有输入类的数组？

<div id="boardinput"> 
    <input id='R1C1' class="blank" maxlength="1" /> 
    <input id='R1C2' class="tw" maxlength="1" /> 
    <input id='R1C3' class="blank" maxlength="1" /> 
    <input id='R1C4' class="tw" maxlength="1" /> 
    <input id='R1C5' class="dl" maxlength="1" /> 
    <input id='R1C6' class="blank" maxlength="1" /> 
</div>

所以ARRAY1 = [ “R1C1”， “R1C2”， “R1C3”， “R1C4”， “R1C4”， “R1C5”， “R1C6”]

和数组2 = [ “空白” ，“tw”，“blank”，“tw”，“dl”，“blank”]

我想这样做，以便我可以在更改后恢复到原始类和id。预先感谢您的帮助。

来源

2012-03-15 Jeff Trimmer

什么样的改变会改变id或class？ – 2012-03-15 23:36:02

我有一个onblur事件，如果input.value不为null，所以将应用不同的样式，则更改该类。我遇到的问题是，如果我将输入更改回null，原始类或ID不会被记住。有可能比存储数组中的原始值更好的方法，但我想不出如何。 – 2012-03-16 00:00:43

尽管@paislee没有在他的回答中说明，但php并不是这样做的 - 他提出的JavaScript是正确的方式。仅供参考，转移到jQuery将是一个很好的举措，因为它使这类代码无需编写并消除跨浏览器兼容性问题。此外，对于ISSUE（与您的问题不同）的正确答案涉及使用addClass和removeClass功能，而不是删除/替换类。查看http://api.jquery.com/addClass/，看看jQuery有多简单。 – 2012-03-16 00:09:31

既然你没有问jQuery的，这里是一个纯JS的解决方案：

var inputs = document.getElementById('boardinput') 
        .getElementsByTagName('input'); 

var input_IDs = new Array(); 
var input_classes = new Array(); 

for (var i = 0; i < inputs.length; i++) { 
    input_IDs[i] = inputs[i].id; 
    input_classes[i] = inputs[i].className; 
}

DEMO

来源

2012-03-15 23:42:46 paislee

你确定你的代码是跨浏览器吗？ – 2012-03-15 23:43:49

@ narek.gevorgyan如果你的意思是“跨浏览器兼容”，那么是的。你确定OP知道jQuery是什么吗？ – paislee 2012-03-15 23:46:52

他要求一个解决方案，只尊重id为“boardinput”的div中的输入元素。也许你应该在解决方案中考虑这一点？ – steveoh 2012-03-15 23:47:10

您可以使用JQuery。此代码必须努力

var array1 = []; 
var array2 = []; 
$('#boardinput').children().each(function(index, element){ 
    array1.push(element.attr('id')); 
    array2.push(element.attr('class')); 
});

来源

2012-03-15 23:40:11

你忘记了ID号。 – Jivings 2012-03-15 23:41:57

谢谢@Jivings – 2012-03-15 23:43:02

有可能恢复的更好的方法属性，但这里是你如何使用jQuery将它们插入到数组中：

$('#boardinput > input').each(function(index, input){ 
    array1.push(input.attr('id')); 
    array2.push(input.attr('class')); 
});

来源

2012-03-15 23:44:50 Jivings

如何构建一个div中所有输入类的数组？

回答

相关问题