错误的选择器

Question

如何使用text更改class的{{1}}？

以下是jQuery代码：

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> </div> <div class="box-body" id="testBody"> The body of the box </div> </div> </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> </div> <div class="box-body" id="testBody"> The body of the box </div> </div> </div>和box1 box2 box-title class更改为其他值？

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

text

以下是我的代码：

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

文本未更改，控制台中未显示任何错误。

提前致谢。

Answer 1

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

是一个不正确的选择器。只需做

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

选择器说 - ＆gt;包含直接或嵌套.box1

的容器.box-title

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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");

Answer 3

您可以尝试

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

Answer 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");

jQuery - 更改类

4 个答案:

错误的选择器

选择器太多