在 html 中查找并获取 id 属性并替换它 - jQuery

Question

我尝试使用这个问题here 来序列化属性但不能处理不同的情况，如何在 .main div 父级中找到整个属性

$(".send").click(function() {

  var data_array = new Array();
  $(".main").each(function() {
    var item = {};
    for (var i in $(this).attr('id')) {
      item[i] = $(this).attr(i);
    }
    data_array.push(item);

  });
  var serialized = JSON.stringify(data_array);

  $("#result").text(serialized);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main">
  <ul>
    <li class="dropped" data-order="0" data-id="1" data-content="blabla" id="first">first</li>
    <li class="dropped" data-order="0" data-id="2" data-content="another content" id="second">second</li>
  </ul>
<labe for="input1">Name: </labe>
<input type="text" id="input1" />
</div>

<div id="result"></div>

<button class="send">Send</button>

我正在尝试获取 <div class="main"> 中的所有 ID，包括输入、标签以及标签 <li>

Answer 1

您需要在您的情况下使用Descendant Selector 来为您的.main 类获取所有data-attributes。仅在 $.each 上使用 .main 将不适用于您的情况。

编辑：根据您想要的对话，在 .main html 类中找到 id，并用一些新的 id 替换现有的 id。现在一切正常，您可以单击发送，旧 id 将存储在一个数组中，新 id 将应用于 HTML 元素。

演示：

$(".send").click(function() {
  var data_array = []
  $(".main").each(function(index, el) {
    //store object
    var item = {};
    //find all the li in .main
    $($(el).find('li')).each(function(ind, li) {
      item["id" + ind] = $(li).attr('id') //store old li id
      $(li).attr("id", "new-li" + ind); //li change new id
    })
    //store input id
    item['id'] = $(el).find('input').attr('id') //store old id
    $(el).find('input').attr('id', 'new-input-id') //assign input new id
    //Push old id's data to array
    alert('All id`s replaced for li and input')
    data_array.push(item);
  });
  console.log(data_array)
  var serialized = JSON.stringify(data_array);
  $("#result").text(serialized);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main">
  <ul>
    <li class="dropped" data-order="0" data-id="1" data-content="blabla" id="first">first</li>
    <li class="dropped" data-order="0" data-id="2" data-content="another content" id="second">second</li>
  </ul>
  <labe for="input1">Name: </labe>
  <input type="text" id="input1" />
</div>

<div id="result"></div>

<button class="send">Send</button>