Не удается получить значение HTML элемента dd с помощью jQuery

Question

Пожалуйста, помогите, я не могу получить значение html элемента dd.

Это мой код:

<table id="tabla_costo"> 
    <h2> 
     Costo de Producción 
    </h2> 
    <dl> 
     <dt>Codigo></dt> 
     <dd class="code"> 
      &nbsp; 
     </dd> 
     <dt>Codigo Secundario></dt> 
     <dd class="code2"> 
      &nbsp; 
     </dd> 
     <dt>Producto</dt> 
     <dd class="name"> 
      &nbsp; 
     </dd> 
     <dt>Cantidad</dt> 
     <dd class="quantity"> 
      &nbsp; 
     </dd> 
     <dt>Costo</dt> 
     <dd class="cost"> 
      &nbsp; 
     </dd> 
    </dl> 
</table> 

Я попытался это, но не работает:

var dl = $('#tabla_costo dl').find('dd.code').first().html(); 
console.log(dl); 

Но я получаю неопределенный

Это мой jsfiddle:

https://jsfiddle.net/n96fvaoe/3/ (обновленный)

Answer 1

Это потому, что у вашего <table> нет строк или ячеек, поэтому это не действительная структура DOM.

Если вы измените ваш <table> так, что его содержание в клетке:

<table id="tabla_costo"> 
<tr><td> 
...content... 
</td></tr> 
</table> 

все работает отлично.

Answer 2

После ответа от @RichieHindle единственным решением, которое будет работать здесь, является следующее.

var dl = $('dl').find(".code").html();