javascript - Jquery 选择器选择一个 div 下的 h4 标签

Question

我想将 h4 标签中的文本更改为其祖父 div 的类名，即 (sds 2016 gwap)。

   <div class="grid">
      <div class="office-year-function sds 2016 gwap">
          <div class="content cell-child">
               <img src="535/img/01.jpg" alt="" width="312px" height="160px">
          </div>
           <div class="img-hover cell-child">
                 <br/>
                 <h3>GWAP Kick-off Ceremony</h3>
                 <h3>2016</h3>
                 <h4></h4>

当文档完成加载时，它将运行以下函数。

function changeTag() {
    for (var i = 1; i <= $('.office-year-function').length; i++) {
        $this = $('div.grid  div.office-year-function:nth-child(' + i + ')');
        var className = $this.attr('class');
        className = className.split(" ");

        for (var j = 1; j < className.length; j++) {
            className[j] = className[j].replace("-", " ");

            if (className[j] == "gwap") {
                $this.find("h4").html += className[j].toUpperCase();
            } else {
                $this.find('h4').html += className[i].capitalize();
            }
        }
    }

}

但是有错误

$this.find("h4").html+=className[j].toUpperCase();
$this.find('h4').html+=className[i].capitalize();

我的代码有什么问题？

Answer 1

您当前的实现不作为 .html()是一个函数，您将其视为属性(property)。您可以使用 [0] 获取底层 DOM 元素并使用 innerHTML 属性。

 $this.find("h4")[0].innerHTML +=className[j].toUpperCase();

但是，使用 .append()可用于获得所需的结果。

function changeTag() {
    for (var i = 1; i <= $('.office-year-function').length; i++) {
        $this = $('div.grid  div.office-year-function:nth-child(' + i + ')');
        for (var j = 1; j < className.length; j++) {
            className[j] = className[j].replace("-", " ");
            if (className[j] == "gwap") {
                $this.find("h4").append(className[j].toUpperCase());
            } else {
                $this.find("h4").append(className[i].capitalize());
            }
        }
    }
}