Question

This is part of some HTML from which I need to retrieve a piece of data. The HTML is assigned to a variable called fullDescription.

<p>testing</p>
<div class="field field-type-text field-field-video-short-desc">
    <div class="field-label">Short Description:&nbsp;</div>
    <div class="field-items">
        <div class="field-item odd">
                Demonstrates the basics of using the Content section of App Cloud Studio        
        </div>
    </div>
</div>
<div class="field field-type-text field-field-video-id">
    <div class="field-label">Video ID:&nbsp;</div>
    <div class="field-items">
            <div class="field-item odd">
                    1251462871001        
            </div>
    </div>
</div>

I wish to retrieve the video ID number (1251462871001). I was thinking something like this:

var videoID = $(fullDescription).find(".field.field-type-text.field-field-video-id").find(".field-item.odd").html();

Although it does not generate any syntax errors, it does not retrieve the number.

Thanks for helping out a jQuery noob!

-Matt

Answer 1

You don’t need so many selectors, try:

var videoID = $(fullDescription).find(".field-field-video-id .field-item.odd").html();

I was lazy and my above code was just to show you don’t need so many selectors. After spending some time to figure this out, I have a solution:

var videoID = $(fullDescription).filter('.field-field-video-id').find('.odd').html();

Filter is the best way in jQuery to sort through a string that is actually HTML. Once you have that, you’re dealing with an HTML object and can use find.