Question

我有一个包含多组列表项的HTML字符串。我想从<li></li>集中提取图像网址和对应的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>

Answer 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()
        });
    });
});

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

请参阅此jsFiddle以获取正在使用的示例。

根据评论更新

请参阅此jsFiddle示例。关键的变化是寻找你传递它的“li”$ .parseHTML（siteContents）;

Answer 2

如果您正在使用jQuery，这将有所帮助，并将进行组织。我用parseHTML更新了。

//而不是每次使用，总是考虑使用，会更快。

    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);

请参阅此jsFiddle

干杯！

如何使用javascript从html字符串中提取所有图像网址和href值？

2 个答案: