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

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 に答える
1

DOM オブジェクトではなく jquery オブジェクトです。これを使用してください。

node.html(count);
于 2013-07-03T10:27:34.673 に答える
0

使用しないでください.children().children()。

1つだけ.children()です。

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

またinnerHTML、プレーンなJavaScriptです。JQuery オブジェクトをそのまま使用.html(value)します。node

$("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 に答える