jQuery 将 ID 传递给同一个父元素的另一个元素

Question

使用此代码，每个<ul> 和class="myDropDown" 都有相同的结果。我的问题是var getID。我希望每个<div class="dropDownInner"> 都能获得创建它的<ul> 的ID。我该如何解决这个问题？

$(document).ready(function() {
  var getID = $(".myDropDown").attr('id');
  $(".myDropDown").wrap('<div class="customDropDown"></div>');
  $(".customDropDown").prepend('<div class="dropDownHeader">');
  $(".dropDownHeader").append('<div class="dropDownInner" id="' + getID + '">Select One</div>');
  $(".dropDownHeader").append('</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="myDropDown" id='testSelect'>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ul class="myDropDown" id='testList'>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Answer 1

这样您可以获取与每个 ul 元素关联的 ID。

$('.myDropDown').each(function(index) {
    // Execute the below code for each element with class .myDropdown
    var id = $(this).closest('ul.myDropDown').attr('id');  
    $(this).wrap('<div class="customDropDown"></div>');
    $(this).prepend('<div class="dropDownHeader">');
    $(this).closest('div').prepend('<div class="dropDownInner" id="' + id + '">Select One</div>');
    $(this).append('</div>');
});

这与您的代码具有相同的 DOM 结构，具有您正在寻找的不同 ID

编辑：Barmar 提出了一个公平的观点。 ID 应该在每个页面上只使用一次。我建议将 ID 更改为类。但是，这将涉及更多代码。