Question

当使用jQuery单击按钮时，如何在第二个div（parent2）上的h1元素上更改h1文本。谢谢！

<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

扩展亲切的用户的答案：

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

Answer 2

您可以这样做：

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

JavaScript部分：

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

编辑：以上回答

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

将为您网页上的每个按钮创建相同的事件。

Answer 3

考虑到你想要一个基于位置的解决方案，又名第一个h1和第二个div ，而不是基于类和ID，那么你有：

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

但这只是为了说明如何按位置选择，@ Kinduser的答案更可取。

要触发按钮点击，请参阅@ splitwire的指示：

$('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

尝试做类似的事情。

 $('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
&nbsp;

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

5 个答案: