鉴于此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');
答案 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。希望这能指出你正确的方向。