Question

如果我有以下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');
        }

    }

});

Answer 1

jsBin demo

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

或：

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

或：

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

Answer 2

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

<强> Live Demo

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

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

<强> 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');

这会更改类.content

中最近div的背景颜色

找到最接近的元素

4 个答案:

jsBin demo