使用 jquery 从 ul li 创建一个对象数组答案

【问题标题】：Create an array of object from ul li using jquery使用 jquery 从 ul li 创建一个对象数组
【发布时间】：2021-07-07 11:29:55
【问题描述】：

我正在尝试使用jQuery 从ul li 标签创建object 数组。不幸的是，我无法做到这一点。我在下面粘贴我的代码。

var photos = [];
$( "#sliderContent li" ).each(function() {

  var title = $(this).find(".title").html();
  var image = $(this).find(".image".html());
  var url = $(this).find(".url").html();
  var firstline = $(this).find(".firstline").html();
  var secondline = $(this).find(".secondline").html();

  var slide = new Object();
  slide.title = title;
  slide.image = image;
  slide.url = url;
  slide.firstline = firstline;
  slide.secondline = secondline;
  photos.push(slide);
});

我的 HTML 列表ul li

<ul id="sliderContent" >
    <li>
        <div class="title">Stairs 1</div>
        <div class="image">vacation.jpg 1</div>
        <div class="url"># 1</div>
        <div class="firstline">Amazing Apartment for Rent in JBR 1</div>
        <div class="secondline">
            <div class='row'>
                    <div class='col1'>ABD 1</div>
                    <div class='col2'>EFG 1</div>
            </div>
            <div class='row'>
                <div class='col1'>ABD 1</div>
                <div class='col2'>EFG 1</div>
           </div><div class='row'>
            <a class='view' href='#'></a>
            <a class='arrange' href='#'></a>
           </div>
       </div>
    </li>
</ul>

这就是我想要创建的。

var photos = [ {
    "title" : "Stairs",
    "image" : "vacation.jpg",
    "url" : "",
    "firstline" : "Amazing Apartment for Rent in JBR",
    "secondline" : "lorem ipsum"
}, {
    "title" : "Office Appartments",
    "image" : "work.jpg",
    "url" : "",
    "firstline" : "Amazing Apartment for Rent in JBR",
    "secondline" : "work?"
}];

请告诉我哪里出错了，以及如何查看数组photos的内容来检查结果。

任何帮助将不胜感激。

【问题讨论】：

可能只是一个错字...但在这一行 var image = $(this).find(".image".html()); 你弄错了括号。
是的。这帮助我度过了难关。谢谢哥们，你让我开心:)

标签： jquery html arrays html-lists

【解决方案1】：

当我们这样做时，为了响应 gurvinder372 的回答，您还可以像这样创建对象：

var slide = {
    title: title,
    image: image,
    url: url,
    firstline: firstline,
    secondline: secondline
};

代替你原来的版本：

  var slide = new Object();
  slide.title = title;
  slide.image = image;
  slide.url = url;
  slide.firstline = firstline;
  slide.secondline = secondline;

编辑：现在，我花了一些时间...在这种情况下，您可以像这样使用 jQuery.map 函数：

var photos = $('#sliderContent li').map(function(index, liItem) {
    var $liItem = $(liItem);

    return {
        title: $liItem.find('.title').html(),
        image: $liItem.find('.image').html(),
        url: $liItem.find('.url').html(),
        firstline: $liItem.find('.firstline').html(),
        secondline: $liItem.find('.secondline').html()
    };
});

请记住，仅当 dom 准备好时才调用此代码（因此列表 sliderContent 存在）。如果您不知道 jQuery.map 函数，请查看其文档：http://api.jquery.com/map/

【讨论】：

酷，从来不知道 jQuery 有这样的地图功能。

【解决方案2】：

您可以通过alert( JSON.stringify( photos ) ); 来查看结果对象

你需要改变

var slide = new Object();

到

var slide = {};

另外，我无法弄清楚你是如何从那个 html 中推断出“第二线”的

【讨论】：