1

<br>項目がタグで区切られている場合、Jquery の .next() 関数が次に選択された項目を返さないのはなぜですか?

JQueryUI Web サイトのデモ エリアから抜粋したコードを次に示します。

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Button - Icons</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "button:first" ).button({
      icons: {
        primary: "ui-icon-locked"
      },
      text: false
    }).next().button({
      icons: {
        primary: "ui-icon-locked"
      }
    }).next().button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      }
    }).next().button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      },
      text: false
    });
  });
  </script>
</head>
<body>

<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>


</body> 
</html>

これにより、次のような表示になります。

正しい表示

しかし<br>、最初の要素の後にタグを挿入すると、次の .button() 呼び出しがスキップされ、次のように表示されます。

誤った表示

2 番目の .next().button( ... "ui-icon-locked" ...) 関数はスキップされたようで、残りの .next().button() 関数は 1 つずれています。

ID を使用してボタンセットを作成し、スタイルを設定することでこれを修正できます。他の方法もあると思いますが、<br>ここで欠けている JQuery の選択とタグについて何かありますか?

4

1 に答える 1

3

.next()常に次の要素を返します。この関数にパラメーターを渡すことは、単なる「条件」です。条件が満たされない場合、jQuery オブジェクトは空になります。

.nextAll()withを使用し:firstてこれに対抗できます。

 $('button:first').button(...).nextAll('button:first') //and on and on
于 2013-09-24T18:24:30.950 に答える