Question

我有一个输入元素，该元素获取助手名称，但两个元素具有相同的ID 编辑此问题不正确，我想将Parent Div ID添加到Child Input。如何将ParentId附加到ChildId

 <div class="wrapper-merge-input">
            <div id="Stb" class="col-md-6   ">
                <label  class="control-label">StartDate</label>
                @page.Html.Raw(fromHtml)
            </div>
            <div id="Edb" class="col-md-6  ">
                <label class="control-label">EndDate</label>
                @page.Html.Raw(toHtml)
            </div>
        </div>
    </div>

*和*

<input type="text" dir="ltr"   class="form-control"
   name="@name" id="@name"
   value="@value" 
   onclick="DatePicker.Show(this,'@today');" />

例如@ name + Edb

Answer 1

下面的代码显示如何使用.attr("id")获取元素的id。为了向上移动到父DOM元素，您应该使用.parent()。

您还可以使用.attr("id", "new-id")设置属性值。这可以包含字符串或变量（如下面的代码所示）。

通过将更新代码放入函数中，可以在单击或任何其他事件后在页面加载时调用它。单击按钮后，它便开始运行，因此您可以看到id的更改。

我添加了一些基本样式，以使演示更易于使用。

让我知道您是否还想要其他东西。

警告，您可能希望使updateID()函数更具体，因此它不会作用于页面上的每个输入。

// Click event for button to demonstrate change
$("#startUpdate").click(function() {
  updateID();
});


function updateID() {

  // Cycle through each input - WARNING - you will want to make this more selective
  $("input").each(function() {

    // Update id of input from it's own name and it's immediate parent's id
    $(this).attr("id", $(this).attr("name") + "-" + $(this).parent().attr("id"));

    // Print message to console to demonstrate id
    console.log("new id = " + $(this).attr("id"));

  });
}

.wrapper-merge-input {
  border: 1px solid black;
  border-radius: 5px;
  padding: 8px;
  margin: 20px;
}

#Edb {
  padding-top: 10px;
}

#startUpdate {
  margin-left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper-merge-input">
  <div id="Stb" class="col-md-6   ">
    <label class="control-label">StartDate</label>
    <input name="example1" id="example1" value="example1" onclick="DatePicker.Show(this,'@today');">
  </div>
  <div id="Edb" class="col-md-6  ">
    <label class="control-label">EndDate</label>
    <input name="example2" id="example2" value="example1" onclick="DatePicker.Show(this,'@today');">
  </div>
</div>

<button id="startUpdate">Update IDs</button>

如何将父元素名称添加到子元素

1 个答案: