时间戳

首页 > 解决方案 > 如何从 JQuery 函数中提取特定数量的元素？

javascript - 如何从 JQuery 函数中提取特定数量的元素？

问题描述

我有一个 JS 函数，可以根据搜索结果提取所有数据。但是，我现在想将其限制为前 6 个列表。最快的方法是什么？我在上面画完整的空白。

    jQuery(document).ready(function ($) {
    // Your code here
    var $properties = $(".properties");
    myvr.properties().then(function (data) {
        console.log(data);
        data.results.forEach(function (property) {
            console.log(property.name);
            $properties.append(
                '<div class="col-12 col-md-6 col-lg-4">'+
                '<div class="min-height-smaller" style="background:url(' +
                property.photo.url +
                '); background-size:cover; background-position:center;"></div>' +
                '<p class="sub-heading">' +
                property.name +
                "</p>" +
                property.headline +
                "<br><br>" +
                ' <a class="primary-btn booking-link" data-property-id="' +
                property.key +
                '" href="/property/?p=' +
                property.slug+"&key="+property.key +
                '">Pricing and Details</a> <br><br></div>'
            );
        });
    });

});

标签： javascriptjqueryarrays

解决方案

您可以使用index保留计数器并添加一个条件if(index < 6)，它将检查索引值是否小于6，然后仅将值附加到 div properties。

演示代码：

//demo json datas
var data = {
  "results": [{
    "name": "something"
  }, {

    "name": "something1"
  }, {
    "name": "something3"
  }, {

    "name": "something4"
  }, {
    "name": "something5"
  }, {

    "name": "something6"
  }, {
    "name": "something7"
  }, {

    "name": "something8"
  }]
}
jQuery(document).ready(function($) {

  var $properties = $(".properties");
  //add index
  data.results.forEach(function(property, index) {
    //only append top 6 values
    if (index < 6) {
      $properties.append(
        "<p class='sub-heading'>" +
        property.name +
        "</p>"
      );
    }

  });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="properties"></div>

推荐阅读