【问题标题】：jQuery - Changing the text property of a classjQuery - 更改类的文本属性
【发布时间】：2015-05-28 05:29:25
【问题描述】：

如何使用jQuery 更改class 的text？

这里是html 代码：

<div class="box1">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">Collapsable</h3>
        <div class="box-tools pull-right">
          <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div><!-- /.box-tools -->
      </div><!-- /.box-header -->
      <div class="box-body" id="testBody">
        The body of the box
      </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>      

<div class="box2">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">Collapsable</h3>
        <div class="box-tools pull-right">
          <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div><!-- /.box-tools -->
      </div><!-- /.box-header -->
      <div class="box-body" id="testBody">
        The body of the box
      </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>

如何将box1 和box2 box-title class text 更改为不同的值？

我指的是每个框的这行html代码：

<h3 class="box-title">Collapsable</h3>

这是我的代码：

$('.box1.box box-default.box-header with-border.box-title').text("Box 1 title");
$('.box2.box box-default.box-header with-border.box-title').text("Box 2 title");

文本没有变化，控制台中也没有显示错误。

提前致谢。

【问题讨论】：

标签： jquery html class text selector

【解决方案1】：

.box1.box box-default.box-header with-border.box-title

是不正确的选择器。简单的做

$('.box1 .box-title').text("Box 1 title");

选择器在说 -> 容器 .box1 包含直接或嵌套的 .box-title

$('.box1 .box-title').text("Box 1 title");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box1">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">Collapsable</h3>
        <div class="box-tools pull-right">
          <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div><!-- /.box-tools -->
      </div><!-- /.box-header -->
      <div class="box-body" id="testBody">
        The body of the box
      </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>      

<div class="box2">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">Collapsable</h3>
        <div class="box-tools pull-right">
          <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div><!-- /.box-tools -->
      </div><!-- /.box-header -->
      <div class="box-body" id="testBody">
        The body of the box
      </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>

【讨论】：

【解决方案2】：

改变这个：

$('.box1.box box-default.box-header with-border.box-title').text("Box 1 title");
$('.box2.box box-default.box-header with-border.box-title').text("Box 2 title");

到这里：

$('.box1.box box-default.box-header with-border.box-title').html("Box 1 title");
$('.box2.box box-default.box-header with-border.box-title').html("Box 2 title");

【讨论】：

【解决方案3】：

你可以试试

$('.box-title').val("Box 1 title");

【讨论】：

【解决方案4】：

您的代码有问题...

错误的选择器

查看您的 HTML，box-header 也有类 with-border。但是您在 jQuery 中传递的选择器讲述了一个不同的故事。

$('.box1.box box-default.box-header with-border.box-title')

...实际上是

$('.box1 .box.box-default .box-header.with-border .box-title')

具有多个类的元素组合在一起作为 CSS 选择器。在中间包含一个空格意味着右边的那个是左边那个的descendant。

选择器太多

虽然这不会妨碍您获得所需的结果，但使用不太具体的 CSS 选择器始终是一个好习惯。您可以通过以下操作轻松完成您要查找的内容。

$(".box1 .box-title").text("Box 1 Title");
$(".box2 .box-title").text("Box 2 Title");

【讨论】：