更有效的查找和提取數據的方式？

鑑於這種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

更有效的查找和提取數據的方式？

回答

相關問題