Более эффективный способ поиска и извлечения данных? - PullRequest
Новая
       3

Более эффективный способ поиска и извлечения данных?

1 голос
/ 04 мая 2011

Учитывая этот 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 () углубляется на бесконечные уровни, и мне нужен только один уровень ниже)

РЕДАКТИРОВАТЬ: и нет, идентификаторы - это классы, которые я мог бы использовать в качестве ярлыковКроме того, я не могу контролировать создаваемый HTML-код.

РЕДАКТИРОВАТЬ 2: хмм, возможно, имеет смысл просто забыть переменную $ featStory и сделать это: 

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

Ответы [ 3 ]

1 голос
/ 04 мая 2011

Аналогично ответу Орблинга, однако вы можете фактически передавать контексты в селектор и продолжать использовать свои кэшированные селекторы, например, так - 

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

Это на самом деле должно быть минимально более эффективным, чем переопределение вашего селектора.

1 голос
/ 04 мая 2011 
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');
0 голосов
/ 04 мая 2011

Добавьте некоторые метаданные в вашу разметку, чтобы их можно было легко сериализовать в объект 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. Надеюсь, это укажет вам правильное направление.

...