Question

I am writing a function to update an order receipt every time the user updates and then closes a product pop-up overlay.
The function searches each input of the form, and then adds the info to the receipt div if its value is greater than 0. I am trying to get the .html() of the label element situated above the input field and which describes the current item, and to use this as the description of the item in the receipt.

I have tried using without success:

 - $this.closest('label').html() 
 - $this.prev('label').html()
 - $this.find('label').html()
 - this.element.find('label').html()

Here is my code. The section I am talking about is the ‘label is’ part…

function updateOrder(){

var items = '';
$('input').each(function(){
    var $this = $(this),
        i_value = $this.attr('value');

    if(i_value > 0){
      items += $this.attr('id') + ' Quantity: ' + i_value + '<br/>' 
      + 'label is: ' + $this.closest('label').html() + '<br/>';  
    }
});

$('#d_reciept').html(items);

}

and a sample form item

<tr>
<td class="td_thumbs">
    <div>
        <a class="fancybox" data-fancybox-group="vinyl-banners" href="img/products/vinyl-corporateblue.jpg"> <img src="img/products/thumbs/vinyl-corporateblue-thumb.png" alt="vinyl c-blue"/></a>
        <label>Corporate Blue</label>
    </div>
</td>
<td>6</td>
<td>
    <input id="vinyl-blue" type="number" max="6" min="0" value="0"/>
</td>
</tr>

Answer 1

The function closest give you first accurance of given selector in ancestors, your label is not in the first ancestors, rather in the parent tr children, You need to go to parent tr and then use find to search its parent for label.

$(this).closest('tr').find('label').html()

or

$(this).closest('tr :td:eq(0)').find('label').html()