JQUERY-获取值并以数组值显示（如下所示）

debugcn 发表于 Dev

WTE

下面的HTML / JS代码可以满足我的要求。单独地，我能够获得预期的值。

但是，我需要按照下面的预期以数组格式插入提取的值。我无法使用此JS代码方法执行此操作。

var getOfferCode;
var getRoomCode;
var getTitle;
var combinedArr = [];

$('.wrapper-container').each(function() {
    getOfferCode = $(this).find('.list-item').attr('data-offer-code');
    getRoomCode = $(this).find('.list-item').attr('data-room-code');
    getTitle = $(this).find('.list-item h2').html();
    combinedArr.push();
});
console.log(combinedArr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper-container">
    <div class="list-item" data-offer-code="sss" data-room-code="Twin">
        <h2>Title 1</h2>
    </div>
    <div class="list-item" data-offer-code="fff" data-room-code="Max">
        <h2>Title 2</h2>
    </div>
    <div class="list-item" data-offer-code="ddd" data-room-code="Min">
        <h2>Title 2</h2>
    </div>
</div>

Expected format:

roomArray: {
  [
    {
        offerCode: "sss",
        roomCode: "Twin",
        title: "Title 1"
    },
    {
        offerCode: "fff",
        roomCode: "Max",
        title: "Title 2"
    },
    {
        offerCode: "ddd",
        roomCode: "Min",
        title: "Title 3"
    }
  ]
}

亚历克斯

您可以在wrapper元素内部循环div并使用attr（）获得属性值。

然后使用这些值构建一个对象，并将其推入CombinedArr数组中。

var getOfferCode;
var getRoomCode;
var getTitle;
var combinedArr = [];

$('.wrapper-container > div').each(function() {

  getOfferCode = $(this).attr("data-offer-code");
  getRoomCode = $(this).attr("data-room-code");
  getTitle = $(this).children('h2').html();
  
  const obj = {
    offerCode: getOfferCode,
    roomCode: getRoomCode,
    title: getTitle,
  }

  combinedArr.push(obj);
});

console.log(combinedArr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-container">
  <div class="list-item" data-offer-code="sss" data-room-code="Twin">
    <h2>Title 1</h2>
  </div>
  <div class="list-item" data-offer-code="fff" data-room-code="Max">
    <h2>Title 2</h2>
  </div>
  <div class="list-item" data-offer-code="ddd" data-room-code="Min">
    <h2>Title 2</h2>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。