使用JavaScript将HTML插入标签

Question

在尝试访问代码中h4元素内的元素时，JavaScript / jQuery出现了问题。 我这样做是因为我想向用户动态显示每个“ h4”部分中有多少指南。 对于PC部分，它应显示“ 4条可用评论”，对于Xbox One部分，应显示“ 3条可用评论”。 但是，两者都说“可用评论”，我认为这是因为我没有正确使用jQuery函数。 这是HTML代码：

  <h4><li class="console">PC (<span class="number"></span> reviews available)</li></h4>
  <div class="gameList">
      <ul>
          <li class="game"><a href="#">Guide #1</a></li>
          <li class="game"><a href="#">Guide #2</a></li>
          <li class="game"><a href="#">Guide #3</a></li>
          <li class="game"><a href="#">Guide #4</a></li>
      </ul>
  </div>
  <h4><li class="console">Xbox One (<span class="number"></span> reviews available)</li></h4>
  <div class="gameList">
      <ul>
          <li class="game"><a href="#">Guide #1</a></li>
          <li class="game"><a href="#">Guide #2</a></li>
          <li class="game"><a href="#">Guide #3</a></li>
      </ul>
  </div> 

这是jQuery / JavaScript代码：

$("h4").each(function() {
    var node = $(this).children().children(); // gets node that has "number" class  
    var count = $(this).next().children().children().length; // gets number of li tags
    node.innerHTML = count;
});

我使用JavaScript的警报功能测试了它是否正确获取了正确的节点和计数，但是由于某种原因，node.innerHTML = count将无法在元素中正确显示“ content”的内容。 而是只显示一个空白。 有人知道为什么吗？

Answer 1

它是一个jQuery对象，而不是DOM对象。

node.html(count);

Answer 2

使用find()更清晰易读

$("h4").each(function() {
   var $this=$(this);
    var node = $this.find('.number'); 
   var count = $this.next().find('li').length; // gets number of li tags
   node.text(count);  //or html()
}); 

并且您在h4遇到了无效的HTML li ，请确保您 在此处 更改了 工作方式

Answer 3

node是这里的jQuery对象。 它没有“ innerHTML”。 相反，您可以使用以下之一：

node.html(count);
node.get(0).innerHTML = count;

node.get(0)将为您提供jQuery对象中的第一个DOM对象。

一个好的做法是用$ （例如$node ） $所有jQuery对象添加前缀或后缀，这样您将始终知道变量是否是jQuery对象。

Answer 4

不要使用.children().children() 。

只有一个.children()可以。

$(this).children('.game');

另外， innerHTML是纯JavaScript。 使用.html(value)作为node是JQuery Object。

$("h4").each(function() {
    var node = $(this).children('.number');
    var count = $(this).next().children('li').length;
    node.html(count);
});

对JQuery API的引用：

.html（）

.children（）

Answer 5

$("h4").each(function() {
   var $spanNumber = $('.console .number', this),
       gameListCount = $(this).next().find('ul li').size();

   $spanNumber.text(gameListCount)
});

Answer 6

您也可以使用它

$("h4").each(function() {
    var node = $(this).find('.number'); 
   var count = $(this).next().find('.game').length;
   node.html(count);
});