Javascript - ボタンの下にあるspanのinnerHTMLを設定する

Question

実行時にプラグインによって（一部）設定されているDOMがあるため、完全に制御できません。 HTMLで作成する最初のオブジェクトは、というオブジェクトで、bootstrap-selectというプラグインが兄弟として<button>を作成しています。この<button>には、子要素<span>（プラグインによっても作成されています）があります。テキストを変更したいのですが、この<span>要素です。

ボタン自体の背景色も変更していますが、これは機能します。スパンのテキストを更新するために関数に1行または2行を追加するだけでいいです。ここで

は（灰色の部分は、私が設定しなければならないものである）DOMの関連する部分のスクリーンショットです：

そしてここでは私のコードです。これはもともとボタンの背景色を設定するために書かれたもので、その程度までは正しく動作します。私はちょうど同様、テキストを設定し、それを展開する必要があります。

function setColorForSelect(elem, col) { 
    // this will change the background color of the <select> object just changed to match the selection 
    // this is necessary because bootstrap-select imposes a complex DOM structure on the <select> item 
    // (there is a <button> that is what is being displayed, so that is the object whose background color needs 
    // to be changed, not the <select> object itself) 

    $(elem).siblings().each(function() { 
     var _this = $(this); 
     if(_this.is(":button")){ 
      _this.css('background-color', col); 
      $(this).children(":first").innerHTML = col; //<-- THIS IS THE LINE THAT DOESN'T WORK! 
      return false; 
     } 
    }); 
} 

これは、すべてのエラーを投げていないが、それは私が見ることができる何も変更されていません。この<span>への参照を取得して、テキストを変更するにはどうすればよいですか？ありがとうございました！

Answer 1

この構文を使用します。

ボタンの最初のスパンを見つけて、そのテキストを変更します。

$(this).find("span:eq(0)").text(col);

それとも

特定のクラスによってスパンを検索し、そのテキストを変更します。

$(this).find("span.filter-option").text(col);

はあまりにも他の方法がいくつかあります。私はそれらが既に他の答えで指摘されていると思います。

Answer 2

エラーが発生しない理由は、colの値をjQueryオブジェクトのinnerHTMLプロパティに割り当てただけだからです。

のいずれかが、そのオブジェクト

.children(":first").html(col); 

ためのjQueryが提供html機能を使用するかtext機能jQueryの

.children(":first").text(col); 

を提供して使用するか、またはネイティブ要素

.children(":first")[0].innerHTML = col; 

にアクセスすることにより、ネイティブのJavaScript APIを使用します

またはgetter jQuery provネイティブ要素を取得してネイティブAPIを使用する場合は、

.children(":first").get(0).innerHTML = col 

Answer 3

もう1つ...

また、行うことができます：

$('span:first',this).text(col); //

はそれが役に立てば幸い！