getElementsBy在一个类中的第一跨度
我试图用改变第一个按钮的HTML格式的HTML文本以下和它的工作:getElementsBy在一个类中的第一跨度
var list = document.getElementsByTagName('button')[0];
list.innerHTML = "AAA";
但是我正在寻找一个更好的解决方案,我可以指定确切的“位置”按钮。例如:
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>
使用querySelector:
document.getElementsByClassName('filter. > .btn-group > button').innerHTML = 'AAAA';
该代码段在下面给出
document.querySelector('.filter > .btn-group > button').innerHTML = 'AAAA';
过滤器类和btn组之间我有一个选择标记和另一个类叫做filter1它不起作用,如果我添加filter1类 –
然而,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");
@Motjaba尽管改变了每个按钮的名称。但这有助于未来的参考。 –
@ApoloRadomer,它完全符合之前的答案。我更新了答案,向您展示了如何选择第一个“按钮”。也许这就是你的目的 – Mojtaba
完美。谢谢 :) –
您需要'document.querySelector'。请参阅:https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector –
您标记为jQuery。但是,代码是原生JavaScript。你在寻找jQuery解决方案吗?如果没有,请删除标签 – Mojtaba
@Mojtaba是的。在这种情况下,我更喜欢jQuery。 –