jquery - 最近的还是父母或孩子？

Question

我有看起来像这样的 html

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30" />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

如果我在单个页面上有 2 个或更多，即

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30" />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30 />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

如何停止干扰，即portlet_content_30如果单击第二个 portlet 中的按钮，我如何只更改第二个中的文本。第一个应该发生相同的情况，而不会影响屏幕上的第二个或任何其他相同的 portlet。

Answer 1

$('.button_30').click(function(){
    $(this).closest('.portlet.portlet_30').text("foo");
});

或者，如果您想更改其中一个portlet portlet_30div：

$('.button_30').click(function(){
    $(this).closest('.portlet.portlet_30')
           .find('.portlet_header.portlet_header_30').text("foo");
});

现场演示

Answer 2

$('.button_30').click(function(){
    $(this).parent('.portlet').find(".portlet_content").text(result);
});

Answer 3

尝试：

$('input.button_30').click(function(){console.log('x');
    $(this).parent().siblings('div.portlet_content.portlet_content_30').html('Your html here')
})​

jsFiddle 示例。

Answer 4

你可以尝试这样的事情（写自我的头脑：P）：

  $('.button_30').click(function() {
        var parent = $(this).closest('.portlet');
        $('.portlet_content_30', parent).html('foobar');
  });