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

时间:2011-05-04 17:11:29

标签: jquery traversal

鉴于此HTML(我意识到srcs& 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');

3 个答案:

答案 0 :(得分: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');

答案 1 :(得分: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');

实际上,这比重新定义选择器的效率要低得多。

答案 2 :(得分:0)

向您的标记添加一些元数据,以便可以轻松地将其序列化为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。希望这能指出你正确的方向。