1

objectを使用してfromul 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て結果を確認する方法を教えてください。

どんな助けでも大歓迎です。

4

2 に答える 2

1

alert( JSON.stringify( photos ) );結果のオブジェクトを表示するために行うことができます

変更する必要があります

var slide = new Object();

に

var slide = {};

また、そのhtmlから「secondline」をどのように推測しているのかわかりません。

于 2013-01-18T07:28:42.007 に答える
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()
    };
});

sliderContentこのコードは、DOM の準備が整った (リストが存在する)場合にのみ呼び出すことを忘れないでください。jQuery.map 関数がわからない場合は、そのドキュメントを確認してください: http://api.jquery.com/map/

于 2013-01-18T07:32:07.440 に答える