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>

如果我在一个页面上有两个或更多，即

<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中的按钮，如何仅更改第二个portlet_content_30中的文本。第一个应该发生同样的情况，而不会影响屏幕上相同的第二个或任何其他portlet。

Answer 1

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

或者，如果您想更改portlet portlet_30 div之一：

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

Live DEMO

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 example

Answer 4

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

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

最近的还是父母还是孩子？

4 个答案: