0

我有一个包含一组列表项的 HTML 字符串。我想从<li></li>集合中提取图像 url 和对应的 href 值，并将这些值用作以后的变量。

    <img src="./season/123434mango.jpg" width="180" height="148"
         alt="mango season" class="png">
    <a href="/mango/"  class="corners">&nbsp;</a>

集合示例<li></li>：

 <li>
            <img src="./season/123434mango.jpg" width="180" height="148"
                 alt="mango season" class="png">
            <a href="/mango/"  class="corners">&nbsp;</a>


                <div class="thumbnail_label">ok</div>


          <div class="details">
            <div class="title">
              <a  href=
              "/mango/"> mango</a>
              <span class="season">2</span>
            </div>
            <ul class="subject">
              <li>read</li>
            </ul>
            <ul class="sub-info">
              <li class="location">Europe</li>
              <li class="price">2</li>
            </ul>
          </div>
        </li>
4

2 回答 2

1

如果您使用的是 jQuery，那么您可以执行以下操作：

var data = [];

$($.parseHTML(siteContents)).each(function() {
    $(this).find("img").each(function() {
        var parent = $(this).parent();

        data.push({
                     SRC: $(this).attr("src"),
                     HREF: parent.find("a").attr("href"),
                     LOCATION: parent.find(".location").text(),
                     PRICE: parent.find(".price").text(),
                     SUBJECT: parent.find(".subject li").text()
        });
    });
});

然后，您可以使用包含对象的数组“数据”。其中每一个都有一个“SRC”和与之关联的“HREF”属性。

有关它的使用示例，请参阅此jsFiddle 。

根据评论更新

请参阅此jsFiddle示例。关键的改变不是寻找“li”，而是传递给它 $.parseHTML(siteContents);

于 2013-07-24T15:59:21.653 回答
1

If you are using jQuery this will do the trick and will be organized. I updated with a parseHTML.

//Instead of using each, always think about use for, will be faster.

    var imagesSourceAndLinkHref = {sources: [], hrefs: []},
    i = 0,
    code = $.parseHTML('<div><li><img src="./season/123434mango.jpg" width="180" height="148" alt="mango season" class="png " /></li></div>'),
    list = $(code).find('li'),
    images = list.find('img'),
    links = list.find('a');

for(i; i < images.length; i++) {
    imagesSourceAndLinkHref.sources.push(images.attr('src'));
}

for(i = 0; i < links.length; i++) {
    imagesSourceAndLinkHref.hrefs.push(links.attr('href'));
}

console.log(imagesSourceAndLinkHref);

See this jsFiddle

Cheers!

于 2013-07-24T16:11:11.467 回答