CODEWITHSUNDEEP
jqueryjquery-selectors
oshirowanen
oshirowanen

Reputation: 15925

Nearest or parent or child?

I have html which looks somethine like this

<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>

If I have 2 or more of those on a single page, i.e.

<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>

How do I stop interferance, i.e. how do I only change the text in the second portlet_content_30 if the button in the second portlet is clicked. The same should happen for the first one without affecting the second or any other portlets on the screen which are the same.

Upvotes: 0

Views: 74

Answers (4)

gdoron
gdoron

Reputation: 150273

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

Or if you want to change one of portlet portlet_30 divs: 

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

Live DEMO

Upvotes: 3

ercpe
ercpe

Reputation: 312

You could try something like this (written from my head :P):

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

Upvotes: 0

j08691
j08691

Reputation: 207923

Try:

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

jsFiddle example.

Upvotes: 0

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5301

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

Upvotes: 0

Related Questions