1

<br>当这些项目由标签分隔时，为什么 Jquery 的 .next() 函数不返回下一个选定项目？

下面是一些取自 JQueryUI 网站演示区的代码：

<!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() 调用，从而导致以下显示：

显示不正确

第二个 .next().button( ... "ui-icon-locked" ...) 函数似乎被跳过了，其余的 .next().button() 函数都是关闭的。

我可以通过使用 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 回答