Question

当这些项目被<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>

这会产生如下显示：

Correct display

但是如果我在第一个元素之后插入<br>标记，则跳过下一个.button（）调用，导致以下显示：

Incorrect display

第二个.next（）。按钮（...“ui-icon-locked”...）函数似乎被跳过，而.next（）。button（）函数的其余部分则被忽略了之一。

我可以通过使用ID，创建按钮集并设置样式来解决这个问题，我确信还有其他方法，但是我在这里缺少JQuery选择和<br>标签吗？

Answer 1

.next()总是返回下一个元素。将参数传递给此函数只是一个“条件”。如果条件不满足，则jQuery对象将为空。

您可以.nextAll()使用:first来解决此问题：

 $('button:first').button(...).nextAll('button:first') //and on and on

jquery .next（）跳过由<br/>标签分隔的选定元素

1 个答案: