Question

我是JQuery的新手，所以如果这是一个明显的问题，我很抱歉。我有一个简单的表单，其中包含一些输入字段。在更改事件上，我想更改预定义的数组。触发更改事件，但在此更改事件中，我想再次遍历所有input-element以填充/更改数组。然而，迭代不起作用。

    <script>        
    jsonObj = [];
    $(document).ready(function(){

        $("input[class=domain]").change(function(){
            refreshData();                                                          
        });

        $("input[class=domain]").each(function() {
            var domain = $(this).attr("name");
            var score = $(this).val();

            item = {}
            item ["domain"] = domain;
            item ["score"] = score;

            jsonObj.push(item);
        });         
    });

    function refreshData() {
        alert("Text Changed");  <<-- This line is reached.      
        $(document)("input [class=domain]").each(function() {
            //TO DO: Refresh jsonObj 
            alert(domain); /<<-- This line is not reached.
        });         
    }
</script>

第二个问题是，是否可以缩短此代码。现在我在document.ready-event 更改和中有两个单独的功能输入元素上的每个。

T.I.A。

Answer 1

您在.之前错过了.find，可能还有.each。代码如下所示：

$(document).find("input[class=domain]").each(function() {
      //TO DO: Refresh jsonObj 
      alert(domain); 
});

更新

关于你的第二个问题，如果.each中的行与refreshData函数中的行相同，我会缩短代码如下：

jsonObj = [];
$(document).ready(function(){
    refreshData();//call once on DOM Load
    $('.domain').change(refreshData); //attach it as named function to change event
});

function refreshData() {
    //keep all this code here
    $(".domain").each(function() {
        var domain = $(this).attr("name");
        var score = $(this).val();

        item = {}
        item["domain"] = domain;
        item["score"] = score;

        jsonObj.push(item);
    });        
}

Answer 2

$('.domain').each(function(){
    alert(domain);
})

使用此代替$(document)("input [class=domain]").each

Answer 3

由于某些原因，这个表达式是错误的：

$(document)("input [class=domain]")

<强> A 即可。 input和[class=domain]之间必须没有空格。这是＆＃34;具有类domain＆＃34;的输入之间的差异。（input[class=domain]）和＆＃34;输入其子节点之一具有类域＆＃34; （input [class=domain]）。

<强>乙即可。要在jQuery元素内部进行查询，您需要使用find方法，如下所示：$(document).find("input [class=domain]")。但由于document是根元素，因此您只需编写$("input [class=domain]")。

P.S

在CSS选择器（如jQuery）中，有一种用于搜索类的特殊语法，因此您只需编写input.domain。

这就是该行最后应该如何看待： $("input.domain").each...

您可以阅读有关css选择器here的更多信息。

Answer 4

我做了一些纠正，你可以缩短它：

<script>        
    jsonObj = []; // array declaration
    $(document).ready(function(){
        $("input.domain").change(function(){ // <----better to use a class selector
            refreshData($("input.domain")); // <----pass the object in the function                                                         
        }).change(); //<----trigger it on load to execute       
    });

    function refreshData(el) { // get the passed object in the func arg
        $(el).each(function() { // <----have a loop on it this way
            var domain = $(this).attr("name"); // extract the name on current object in collection
            var score = this.value; // get the value of the current object in iteration
            var item = {}; // declare a new object
                item["domain"] = domain; // set new prop and assign value here
                item["score"] = score; // set new prop and assign value here
            jsonObj.push(item); // now push the object in the array.
        });         
    }
</script>

Answer 5

奇怪的代码......

$(document)("input [class=domain]").each

试试这个：

$("input[class=domain]").each

JQuery循环遍历javascript函数

5 个答案: