Javascript - 在按钮下设置span的innerHTML

Question

我有一个在运行时由插件设置（部分）的DOM，因此我无法完全控制它。我在HTML中创建的初始对象是<select>对象，插件bootstrap-select正在创建<button>作为兄弟。这个<button>又有一个子<span>元素（也是由插件创建的）。这是<span>元素，我想要更改其文本。

我也在改变按钮本身的背景颜色，这很有效。我只需要在我的函数中添加一行或两行来更新跨度的文本，我很高兴。

以下是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

使用此语法。

找到按钮中的第一个范围并更改其文本。

public static

或者

按特定类查找范围并更改其文本。

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

还有其他几种方法。我认为其他答案已经指出了这些。

Answer 2

没有错误的原因是因为您刚刚将col值分配给jQuery对象上的innerHTML属性。

使用jQuery为其对象提供的html函数

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

或使用jQuery提供的text函数

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

或通过访问本机元素

来使用本机JavaScript API

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

或使用getter jQuery提供获取本机元素然后使用本机API

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

Answer 3

再一次......

你也可以这样做：

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

希望它有所帮助！