как добавить имя родительского элемента в дочерний элемент

Question

У меня есть входной элемент, который получает имя помощника, но два элемента имеют тот же идентификатор, что неверно для Редактировать эту проблему, я хочу добавить Parent Div Id для дочернего ввода. Как я могу добавить 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>