0

如果我有以下 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>

使用txtBox作为起点，我如何找到最接近的content，以便我可以添加一些东西？

如果我目前拥有的完整脚本在这里：

$(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');
        }

    }

});
4

4 回答 4

2

jsBin 演示

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

或者：

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

或者：

$('.txtBox').parent().next('.content').text('Hello oshirowanen!');
于 2012-11-02T09:45:57.010 回答
1

您必须转到 div 文本框的父级并在其兄弟姐妹中查找，

现场演示

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

如果给定的 html 具有恒定结构，您也可以使用文本框的父级的下一个。

现场演示

var content = $('.txtBox').parent().next('.content');
于 2012-11-02T09:45:38.517 回答
1 
$('.txtBox').parent().next('.content').html('Whatever')
于 2012-11-02T09:51:07.507 回答
0 
$('.content').closest('div').css('background-color', 'red');

这会改变 .content 类最近的 div 的 baground clour

于 2012-11-02T09:47:35.543 回答