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

鉴于这种HTML（我意识到索马里红新月&的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');

来源

2011-05-04 CaptSaltyJack

到Orbling的答案相似但实际上你可以通过上下文到选择和继续使用缓存的选择，像这样 -

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

这实际上应该是最低限度比重新定义你的选择更加高效。

来源

2011-05-04 17:19:20 HurnsMobile

打我吧。当然，你也可以在这里使用直接的儿童选择器。 – peirix 2011-05-04 17:21:44

优秀。谢谢！ – CaptSaltyJack 2011-05-04 17:25:16

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

来源

2011-05-04 17:15:05 Orbling

是的，我刚刚编辑我的帖子来显示这一点。但是，请记住，“h2 a”将在h2以下搜索锚定无限级别，而“h2> a”只是我需要的一个级别。 – CaptSaltyJack 2011-05-04 17:17:45

@CaptSaltyJack：好吧，我用你的伪代码编写我的选择器作为例子，如果你的布局不同，那么选择器也是如此。我总是将类/ ID放在需要选择的重要位上，因此很少使用标签进行选择。 – Orbling 2011-05-04 17:20:21

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

来源

2011-05-04 17:31:52

很酷的解决方案，但正如我在我的原始文章中所说的，我无法控制正在提供的HTML。这是100％的前端。 – CaptSaltyJack 2011-05-04 18:45:04

它不包含在您的原始文章中。它包含在您原始帖子的第一个编辑中。干杯。 – 2011-05-04 19:24:48

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

回答

相关问题