Un moyen plus efficace de trouver et d'extraire des données?

Question

Donné le HTML (je me rends compte des SRCs & HREF ne sont pas valides, c'est pseudo-code):

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

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

Je veux tirer diverses données sur. Je le fais comme ceci:

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

Existe-t-il une meilleure façon de le faire? Il semble juste maladroit avec tous les appels à .children(). (Je n'ai pas utilisé .find() car .find() va à des profondeurs infinies, et je ne voulais qu'un niveau plus bas)

EDIT: et non, il n'y a pas d'ID de classes que je pourrais utiliser comme raccourcis, ni Ai-je le contrôle sur le code HTML généré?

EDIT 2: Hmm, peut-être plus judicieux d'oublier le featStory $ var et faire:

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

Answer 1

similaires à la réponse de Orbling mais vous pouvez passer réellement des contextes dans le sélecteur et continuer à utiliser vos sélecteurs mises en cache comme si -

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

Cela devrait effectivement être peu plus efficace que de redéfinir votre sélection.

Answer 2

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

Ou, pour l'efficacité, vous pouvez conserver l'objet capturé #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

Ajoutez des métadonnées à votre balisage afin qu'il puisse être facilement sérialisé dans un objet JSON.

data- Les attributs sont parfaits pour cela, ils sont nommés arbitrairement.

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

Vous cherchez probablement à cela et se rendre compte que cela a plus de code que ce que vous avez commencé avec .. mais sa très évolutive. Vous pouvez ajouter de nouveaux éléments HTML et ils finiront dans votre objet sans modifier votre JavaScript. Espérons que cela vous indique la bonne direction.