Question

I am trying to use the function below to extract from the block of HTML shown below (the quotes ARE in the returned value, not sure it matters) the string “Demonstrates the basics of using the Content section of App Cloud Studio”.

I am thinking I can use the first <div class="field-item odd"> to retrieve the needed string as shown in the line of code

var displayDescription = $(fullDescription).find( "#field-item odd" ).html();

But, this always returns null. (I can use the Chrome Developer tools to see that fullDescription is populated properly.)

Any help greatly appreciated.

CODE:

function onGetDataSuccess( data ) {
  for (var i = 0; i < data.length; i++) {
    var thisItem = data[i];
    var isVideo = jQuery.contains( thisItem.link, "/training-videos/" );
    if ( isVideo ){
      var fullDescription = thisItem.description;
      var displayDescription = $(fullDescription).find( "#field-item odd" ).html();
    }
  }
}

HTML:

<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>

Answer 1

You’re using the wrong selector all together. field-item is a class, and odd is a class too. You should be using:

$(fullDescription).find( ".field-item.odd" ).html()

jQuery selectors are identical to CSS selectors for most use cases.