クラスのgetElementsBy最初のスパン

Question

私は、以下のものを使用してHTMLの最初のボタンのHTMLテキストを変更しようとした、それが働いた：

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

をしかし、私は指定することができ、より良い解決策を探していますボタンの正確な "場所"。例えば：

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

をquerySelectorを使用する：

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

または、任意の同様の組み合わせ。

私はあなたが.btn-group下で1 button以上のものを持っていて、最初のものだけに影響を与えたい場合は、first()を使用することができ、また、このshort article

を見てみましょうお勧めします。このように：

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