在html内查找并获取id属性并将其替换-jQuery

问题描述

我尝试使用此问题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>

解决方法

您需要使用Descendant Selector来获取data-attributes类的所有.main。在您的情况下，仅在.main上使用$.each即可。

编辑：根据对话，您要在.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>