更改许多元素的 innerhtml

Question

我有一个 ajax 调用，我用它来将不同页面上的查询结果填充到 table。它有效，但我将不得不做另一个类似的 ajax 调用，这种必须做 $(#Whatever_Selector).html(result[0]['Whatever_Index']) 的结构让我发疯，但我似乎无法弄清楚如何解决它。

也许使用 .each 和 $(this) 的东西，但我不知道。

我的脚本：

    $('#selection_project').change(function(event) {
        $.post('info.php', { selected_project: $('#selection_project option:selected').val()},
            function(data) {
                var result = JSON.parse(data);
                var project = result['selected_project'];
                $('#CTN').html(\"CTN - \"+project); 
                $('#Global_Project_Number').html(result[0]['Global_Project_Number']);
                $('#Project_Type').html(result[0]['Project_Type']);
                $('#Lead_Location').html(result[0]['Lead_Location']);
                $('#Local_Project_Number_1').html(result[0]['Local_Project_Number_1']);
                $('#Local_Project_Number_2').html(result[0]['Local_Project_Number_2']);
                $('#Local_Project_Number_3').html(result[0]['Local_Project_Number_3']);
                $('#Local_Project_Number_4').html(result[0]['Local_Project_Number_4']);
                $('#Local_Project_Number_5').html(result[0]['Local_Project_Number_5']);
                $('#Development_Location_2').html(result[0]['Development_Location_2']);
                $('#Development_Location_3').html(result[0]['Development_Location_3']);
                $('#Development_Location_4').html(result[0]['Development_Location_4']);
                $('#Development_Location_5').html(result[0]['Development_Location_5']);
                $('#Customer').html(result[0]['Customer']);
                $('#Duration').html(result[0]['Duration']);
                $('#Customer_Group').html(result[0]['Customer_Group']);
                $('#Average_Number_of_Pieces').html(result[0]['Average_Number_of_Pieces']);
                $('#Project_Name').html(result[0]['Project_Name']);
                $('#State').html(result[0]['State']);
                $('#BU_CC').html(result[0]['BU_CC']);
                $('#Start_Of_Production').html(result[0]['Start_Of_Production']);
                $('#Outlet').html(result[0]['Outlet']);
                $('#End_Of_Development').html(result[0]['End_Of_Development']);
                $('#Start_Of_Development').html(result[0]['Start_Of_Development']);
                $('#Project_Connection').html(result[0]['Project_Connection']);
                $('#Project_Manager').html(result[0]['Project_Manager']);
                $('#Chance_Budget').html(result[0]['Chance_Budget']);
                $('#System_TPL').html(result[0]['System_TPL']);
                $('#Chance_Forecast').html(result[0]['Chance_Forecast']);
                $('#Product_Family').html(result[0]['Product_Family']); 
                $('#Technology').html(result[0]['Technology']);
                $('#LL_SW').html(result[0]['LL_SW']);
                $('#Processor_Type').html(result[0]['Processor_Type']);
                $('#HL_SW').html(result[0]['HL_SW']);
                $('#Chassis_Type').html(result[0]['Chassis_Type']);
                $('#Technology_Development').html(result[0]['Technology_Development']);
                $('#Technical_Description').html(result[0]['Technical_Description']);
                $('#username').html(result[0]['username']);
                $('#Milestone_1').html(result[0]['Milestone_1']);
                $('#Milestone_2').html(result[0]['Milestone_2']);
                $('#Milestone_3').html(result[0]['Milestone_3']);
                $('#Milestone_4').html(result[0]['Milestone_4']);
                $('#Milestone_5').html(result[0]['Milestone_5']);
                $('#Milestone_6').html(result[0]['Milestone_6']);
                $('#Due_Date_1').html(result[0]['Due_Date_1']);
                $('#Due_Date_2').html(result[0]['Due_Date_2']);
                $('#Due_Date_3').html(result[0]['Due_Date_3']);
                $('#Due_Date_4').html(result[0]['Due_Date_4']);
                $('#Due_Date_5').html(result[0]['Due_Date_5']);
                $('#Due_Date_6').html(result[0]['Due_Date_6']);

            } 
        );            
    });

我即将用数百个 <td> 填充另一个 table，我不想使用上述格式！

如何创建某种循环来使用 Jquery 选择器中的数组索引？

Answer 1

特别针对您的用例（使用给定信息），您可以使用 $.each 迭代对象的属性：

$.each(result[0], function(key, value) {
  $('#' + key).html(value);
});

假设所有值都有对应的 id 元素。

Answer 2

用一个简单的循环遍历你的 result[0] 对象。

$('#selection_project').change(function(event) {
    $.post(
        'info.php',
        {selected_project: $('#selection_project option:selected').val()},
        function(data) {
            var result = JSON.parse(data);
            var project = result['selected_project'];
            result = result[0];
            $('#CTN').html('CTN - ' + project); 
            for (el in result) {
                if ($('#' + el).length) {
                    $('#' + el).html(result.el);
                }
            }
        }
    );
});

更改许多元素的 innerhtml

Changing the innerhtml of many elements

jquery

jquery-selectors