Question

鉴于此HTML（我意识到srcs＆amp; hrefs无效，这是伪代码）：

<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

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 2

与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 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。希望这能指出你正确的方向。

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

3 个答案: