jQuery如何更改第二个元素上的文本？

Question

How to change h1 text on h1 element on second div (parent2) when click button with jQuery. Thanks!

<div id="parent1">
  <h1 class="child">Hello World</h1>
</div>
<div id="parent2">
  <h1 class="child">Hello World</h1>
</div>
<div id="parent3">
  <h1 class="child">Hello World</h1>
</div>

<button>Change</button>

Answer 1

To expand upon Kind user 's answer:

$('button').on('click', function() {
    //kind user's code here//
    $('#parent2 .child').text('text'); 
});

Answer 2

You can do something like this:

<div id="parent1">
    <h1 class="child">Hello World</h1>
</div>
<div id="parent2">
    <h1 class="child">Hello World</h1>
</div>
<div id="parent3">
    <h1 class="child">Hello World</h1>
</div>

<button id="changeTextButton">Change</button>

And the JavaScript part:

$(document).ready(function () {
            $('#changeTextButton').click(function () {
                $('#parent2 .child').text('Custom text');
            });
        });

EDIT : The above answers with

 $('button').on('click', function () {

will create the same event for each button on your page.

Answer 3

Considering you want a solution based on the position, aka first h1 and second div , and not based on classes and IDs, then you have :

 $('div:nth-child(2) > h1').text('your text');

But this is just to show how it's done to select by position, @Kinduser's answer is preferable.

And to trigger the button click, refers to @splitwire's indication:

$('button').on('click', function() {
   $('div:nth-child(2) > h1').text('your text');
});

 $('#example button').first().click(function () { $('#example div:nth-child(2) > h1').text('your text'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="example"> <div> <h1>Hello World</h1> </div> <div> <h1>Hello World</h1> </div> <div> <h1>Hello World</h1> </div> <button>Change</button> </div> 

Answer 4

Try to do something like that.

 $('button').on('click', function() {
        $('#parent2 .child').html('some text here'); 
 });

Answer 5

$('div:nth-child(2) > h1').text('your new text here');
$('div:nth-child(2)) //2 is the index no of div you can change as you required. like 1