Question

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

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的内容以检查结果。

任何帮助将不胜感激。

Answer 1

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

你需要改变

var slide = new Object();

到

var slide = {};

另外，我无法弄清楚你是如何从那个html

中推断出'secondline'的

Answer 2

当我们在这里时，为了回应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从ul li创建一个对象数组

2 个答案: