getElementsBy class 中的第一个跨度

Question

我已经尝试使用以下方法更改 HTML 中第一个按钮的 HTML 文本并且它起作用了：

var list = document.getElementsByTagName('button')[0];
list.innerHTML = "AAA";

但我正在寻找一个更好的解决方案，我可以在其中指定按钮的确切 "location"。例如：

document.getElementsByClassName('filter. > .btn-group > button').innerHTML = 'AAAA';

片段如下：

var list = document.getElementsByTagName('button')[0];
list.innerHTML = "AAA";


//I am looking something like the below:

//document.getElementsByClassName('filter. > .btn-group > button > span > .multiselect-selected-text').innerHTML = 'AAAA';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">

<div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected"><span class="multiselect-selected-text">None selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="0"> AA</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> BB</label></a></li></ul></div>

<div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected"><span class="multiselect-selected-text">None selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="0"> AA</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> BB</label></a></li></ul></div>

</div>

Answer 1

使用查询选择器：

document.querySelector('.filter > .btn-group > button').innerHTML = 'AAAA';

Answer 2

但是，jQuery 解决方案可能是以下任何一种：

$(".filter > .btn-group > button").html("AAAA");

或

$(".filter").children(".btn-group").children("button").html("AAAA");

或者，任何类似的组合。

我建议看看这个short article

此外，如果 .btn-group 下有多个 button，而您只想影响第一个，则可以使用 first()。像这样：

$(".filter").children(".btn-group").children("button").first().html("AAAA");

getElementsBy class 中的第一个跨度

getElementsBy the first span in a class

jquery

html

innerhtml

getelementsbytagname

getelementsbyclassname