0

我在尝试访问代码中 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 不会在元素中正确显示“内容”的内容。相反，它只是显示一个空白。有谁知道为什么？

4

6 回答 6

1

它是一个 jquery 对象而不是 DOM 对象..使用这个...

node.html(count);
于 2013-07-03T10:27:34.673 回答
1

使用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()
});

并且您已经输入了无效的 HTML li， h4请确保您 在此处更改了该工作小提琴

于 2013-07-03T10:28:13.220 回答
1

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

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

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

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

于 2013-07-03T10:29:37.947 回答
0

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

只有一个.children()会做。

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

也是innerHTML普通的javascript。.html(value)按原样使用nodeJQuery 对象。

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

对 JQuery API 的参考：

.html()

。孩子们（）

于 2013-07-03T10:34:51.240 回答
0 
$("h4").each(function() {
   var $spanNumber = $('.console .number', this),
       gameListCount = $(this).next().find('ul li').size();

   $spanNumber.text(gameListCount)
});
于 2013-07-03T10:36:06.483 回答
0

你也可以用这个，

$("h4").each(function() {
    var node = $(this).find('.number'); 
   var count = $(this).next().find('.game').length;
   node.html(count);
});
于 2013-07-03T10:40:08.430 回答