Finding the closest element

Question

If I have the following HTML

<div class="main">
    <div class="header">

    </div>
    <div class="sub_header">
        <input type="text" class="txtBox" />
    </div>
    <div class="content">

    </div>
    <div class="footer">

    </div>
</div>

Using txtBox as a starting point, how do I find the closest content so I can add something to it?

Here if the full script I have at the moment:

$(document).ready(function() {
    var myDate = new Date();
    var todaysDate = myDate.getDate() + '/' + (myDate.getMonth()+1) + '/' + myDate.getFullYear();

    get_data( todaysDate );

    $(".txtBox").val(todaysDate).datepicker( {
        changeMonth: true,
        changeYear: true,
        yearRange: "+0:+1",
        showButtonPanel: false,
        dateFormat: "d/mm/yy",
        onSelect: function(dateText, obj){
            get_data( $(this), dateText );
        }
    } );

    function get_data( that, dateText ) {

        if ( typeof that != "undefined" )
        {
            that.closest('.main').find('.content').empty().append( dateText );
        }
        else
        {
            $(".content.new").append( dateText ).removeClass('new');
        }

    }

});

Answer 1

jsBin demo

$('.txtBox').closest('.main').find('.content').text('Hello oshirowanen!');

or:

$('.txtBox').closest('div').next('.content').text('Hello oshirowanen!');

or:

$('.txtBox').parent().next('.content').text('Hello oshirowanen!');

Answer 2

You have to go to parent of text box which is div and find in siblings of it,

Live Demo

var content = $('.txtBox').parent().siblings('.content');

You can also use the next of parent of text box if the given html has constant structure.

Live Demo

var content = $('.txtBox').parent().next('.content');

Answer 3

$('.txtBox').parent().next('.content').html('Whatever')

Answer 4

$('.content').closest('div').css('background-color', 'red');

这改变了class .content的最接近div的背景