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

Question

使用下面的 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"
    }
  ]
}

标签： javascriptjquery

Answer 1

.push 方法需要参数——你要推送的对象

例如

combinedArr.push({getOfferCode,getRoomCode,getTitle});

此外，您each只能获得第一个条目，因为您只有一个包装器。你需要循环.list-item。

列表项的映射更优雅

const roomArray = $('.wrapper-container div.list-item').map(function() {
  const offerCode = $(this).attr('data-offer-code');
  const roomCode = $(this).attr('data-room-code');
  const title = $(this).find('h2').html();
  return { offerCode, roomCode, title }
}).get();
console.log(roomArray)

<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 3</h2>
  </div>
</div>

这是您修复的代码

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

$('.wrapper-container .list-item').each(function() {
    getOfferCode = $(this).attr('data-offer-code');
    getRoomCode = $(this).attr('data-room-code');
    getTitle = $(this).find('h2').html();
    combinedArr.push({getOfferCode,getRoomCode,getTitle});
});
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>