堆栈内存溢出
  繁体   English   中英

使用文本框迭代 div 并使用 javascript 更改 id

[英]iterate div with textboxes and change id using javascript

 原文  2020-01-21 12:46:56  7   3    javascript/ loops

问题描述

我尝试使用 javascript 遍历放置在<div class="col-md-2">每个文本框，以便像这样更改它们的 ID。

    function iterateBoxesAndSetUniqueIds() {

    var childDivs = document.getElementById('subContent').children;
    //alert(childDivs.length);

    for( i=0; i< childDivs.length; i++ )
    {
        var el = children[i];
        el.name = 'events[' + i + '].Key'; // 
        el.id = 'events[' + i + '].Key';

        el.name = 'events[' + i + '].Value.StartDate'; 
        el.id = 'events[' + i + '].Value.StartDate';

        el.name = 'events[' + i + '].Value.EndDate'; 
        el.id = 'events[' + i + '].Value.EndDate';

        el.name = 'events[' + i + '].Value.Description'; 
        el.id = 'events[' + i + '].Value.Description';
    }

<div id="divcontent">
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>
    </div>
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>

我正在寻找的结果是这个......

<div id="divcontent">
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>
    </div>
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[1].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[1].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[1].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[1].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>

但是在运行 javascript 函数时，我在 javascript 中收到“ReferenceError: children is not defined”错误。 任何人都可以帮忙吗？

更新更改函数后，结果现在看起来像这样..

<div id="divcontent">

<div class="form-group" id="subContent">
    <div class="col-md-2" id="events[0].Value.Description">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2" id="events[1].Value.Description">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div><div class="col-md-2" id="events[2].Value.Description">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2" id="events[3].Value.Description">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2" id="events[4].Value.Description">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>
</div>

使用此代码时..

    function iterateBoxesAndSetUniqueIds() {

    var childDivs = document.getElementById('subContent').children;
    //alert(childDivs.length);

    for( i=0; i< childDivs.length; i++ )
    {
        var el = childDivs[i];
        el.name = 'events[' + i + '].Key'; // 
        el.id = 'events[' + i + '].Key';

        el.name = 'events[' + i + '].Value.StartDate'; 
        el.id = 'events[' + i + '].Value.StartDate';

        el.name = 'events[' + i + '].Value.EndDate'; 
        el.id = 'events[' + i + '].Value.EndDate';

        el.name = 'events[' + i + '].Value.Description'; 
        el.id = 'events[' + i + '].Value.Description';
    }

3 个解决方案

解决方案1
 2 已采纳  2020-01-21 13:21:01

首先， ReferenceError: children is not defined的原因就是这段代码

 var el = children[i];

如果您将其更改为：

var el = childDivs[i];

您会得到一个结果，它为第一个 ONLY THE FIRST 子内容更改了 0,1,2,3,4，这不是您真正想要的。

所以你想要做的是使用querySelector来获取所有子内容。 从那里我们可以更改该特定子内容的每个单独内容。

假设每个 subContent 只有 4 个字段，这是您的解决方案

 function iterateBoxesAndSetUniqueIds() { var subContents = document.querySelectorAll("#subContent") //LOOPS OVER ALL SUBCONTENTS for (i = 0; i < subContents.length; i++) { var children = subContents[i].children console.log(children) children[0].children[0].name = 'events[' + i + '].Key'; children[1].children[0].name = 'events[' + i + '].Value.StartDate'; children[2].children[0].name = 'events[' + i + '].Value.EndDate'; children[3].children[0].name = 'events[' + i + '].Value.Description'; } }

让我解释一下这段代码：

  1. 获取所有子内容

  2. 对于每个子内容，我将获取其所有子内容

  3. 对于每个孩子又名<div class="col-md-2">有 1 个孩子input field所以我使用children[0]所以我改变了那个名称

解决方案2
 1  2020-01-21 13:01:41

在您的 for 循环中，您有children[i]将其更改为childDivs[i] 。

您正在引用循环中不存在的变量children 。 您需要访问 nodeList childDivs保存的每个值

要解决第二个问题，您需要使用迭代索引i作为变量而不是将其作为字符串传入。 例如：

for( i=0; i< childDivs.length; i++ )
{
    var el = childDivs[i];
    el.name = events[i].Key; // 
    el.id = events[i].Key;

    el.name = events[i].Value.StartDate; 
    el.id = events[i].Value.StartDate;

    el.name = events[i].Value.EndDate; 
    el.id = events[i].Value.EndDate;

    el.name = events[i].Value.Description; 
    el.id = events[i].Value.Description;
}

尽管在循环的每次迭代中，您现在将 name 和 id 设置为不同的 4 次。 您还需要考虑要设置 id 和名称的值，并且只需执行一次。 例如：

for( i=0; i< childDivs.length; i++ ) {
    var el = childDivs[i];

    el.name = events[i].Key;
    el.id = events[i].Key;
}

确保将events[i].Key更改为您要使用的正确属性。 我也去掉了events[i].Key周围的引号，因为这些不是必需的。

解决方案3
 0  2020-01-21 13:04:15

您正在使用 var 孩子，但它不存在。 正确的 var 是 childDivs。 这是更正：

function iterateBoxesAndSetUniqueIds() {

var childDivs = document.getElementById('subContent').children;
//alert(childDivs.length);

for( i=0; i< childDivs.length; i++ )
{
    var el = childDivs[i];
    el.name = 'events[' + i + '].Key'; // 
    el.id = 'events[' + i + '].Key';

    el.name = 'events[' + i + '].Value.StartDate'; 
    el.id = 'events[' + i + '].Value.StartDate';

    el.name = 'events[' + i + '].Value.EndDate'; 
    el.id = 'events[' + i + '].Value.EndDate';

    el.name = 'events[' + i + '].Value.Description'; 
    el.id = 'events[' + i + '].Value.Description';
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 尝试使用jquery / javascript遍历图像并更改div ID中的src url JavaScript使用ID更改DIV背景 通过javascript更改div id 使用JavaScript更改DIV ID 如何使用javascript遍历ASP .NET文本框并计算值？ 将 div id 更改为 javascript 变量 使用Javascript更改link_to中的目标div ID 使用没有ID和标记名的JavaScript更改DIV文本 JavaScript使用了错误的文本框 使用Javascript乘以文本框
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM