更有效地查找和提取数据的方法？

Question

给定这个 HTML（我意识到 srcs 和 href 无效，这是伪代码）：

<div id="featured-story">
    <a href="fullstory">
        <img src="thumbnail" />
    </a>

    <h2><a href="fullstory">Headline</a></h2>
</div>

我想提取各种数据。我这样做是这样的：

var $featStory = $('#featured-story');
var featHeadline = $featStory.children('h2').text();
var featURL = $featStory.children('h2').children('a').attr('href');
var featImg = $featStory.children('a').children('img').attr('src');

有没有更好、更有效的方法来做到这一点？所有对 .children() 的调用看起来都很笨重。 （我没有使用 .find() 因为 .find() 无限深，我只想要一层）

编辑：不，没有 ID 是我可以用作快捷方式的类，我也没有控制权覆盖正在生成的 HTML。

编辑2：嗯，忘记 $featStory var 并执行以下操作可能更有意义：

var featHeadline = $('#featured-story > h2').text();
var featURL = $('#featured-story > h2 > a').attr('href');
var featImg = $('#featured-story > a > img').attr('src');

Answer 1

与 Orbling 的答案类似，但是您实际上可以将上下文传递到选择器中并继续使用缓存的选择器，就像这样 -

var $featStory = $('#featured-story');
var featHeadline = $('h2 a', $featStory).text();
var featURL = $('h2 a', $featStory ).attr('href');
var featImg = $('img', $featStory).attr('src');

这实际上应该比重新定义选择器更有效。

Answer 2

var featHeadline = $('#featured-story h2 a').text();
var featURL = $('#featured-story h2 a').attr('href');
var featImg = $('#featured-story img').attr('src');

或者，为了提高效率，您可以保留捕获的 #featured-story 对象。

var featStory = $('#featured-story');
var featHeadline = featStory.find('h2 a').text();
var featURL = featStory.find('h2 a').attr('href');
var featImg = featStory.find('img').attr('src');

Answer 3

将一些元数据添加到标记中，以便可以轻松地将其序列化为 JSON 对象。

data- 属性对此非常有用，它们是任意命名的。

 <!--
    data-property - denotes the property name
    data-target   - if specified uses the attribute value instead of text()
  -->
<div id="featured-story">
    <a href="fullstory">
        <img data-property="img" data-target="src" src="thumbnail" />
    </a>

    <h2 data-property="headline"><a href="fullstory" data-property="url" data-target="href">Headline</a></h2>
</div>

function serialize(context) {
  var context = $(context).get(0),
      data = {};

  $('*', context).each(function() {
     var property = $(this).data('property');
     if(property  != null) {
        var target = $(this).data('target');
        data[property] = target == null : $(this).text() ? $(this).attr(target);
     }
  });

  return data;
}

//usage
var story = serialize('##featured-story');

您可能正在查看这个并意识到它的代码比您开始时的代码更多......但它非常可扩展。您可以添加新的 HTML 元素，它们最终会出现在您的对象中，而无需更改您的 JavaScript。希望这能为您指明正确的方向。