jQuery 的 next() 处理不相邻的元素答案

【问题标题】：jQuery's next() on elements not next to each otherjQuery 的 next() 处理不相邻的元素
【发布时间】：2011-02-05 02:15:58
【问题描述】：

我有一些可怕的代码需要处理

...
<div class="container">
   ...
    <tr>
    <td width="100" height="50">
         <a class="swaps"><img src="http://www.blah.jpg" alt="Some Title" id="1"></a></span></td>
    </tr>
   <tr>
    <td width="100" height="50">
        <a class="swaps"><img src="http://www.blah2.jpg" alt="Another title" id="2"></a></span></td>
    </tr>
</div>

如果我使用

var thisone = $("#container .swaps:first")

要选择第一个（id 为 1）为什么我无法选择

thisone.next()?

【问题讨论】：

当您致电thisone.next() 时，您是否正在寻找下一个<a class="swaps"..？
是的。它的问题是我需要获取下一个以便我可以迭代（以便下一个成为当前的，下一个成为下一个，等等......）

标签： jquery next

【解决方案1】：

HTML 是真实的吗？我没有看到任何 id 为 "container" 的元素，而你正在做

$("#container .swaps:first")

另外，如果是真正的 HTML，你应该稍微修正一下（关闭 img 标签，并在之前添加 span 的开始标签）

假设您的 HTML 没问题，这应该适用于您的场景。

var thisone = $("#container .swaps:first");
thisone.children();

IMG 不是锚的兄弟，是一个孩子。

【讨论】：

那返回一个空白，不幸的是......？

【解决方案2】：

jQuery 的next() 函数返回所有匹配元素的下一个兄弟，因为它们出现在 DOM 树中（不在 jQuery 结果集中）。所以调用

$("#container .swaps:first")

获取第一个锚点，并在其上调用 next() 返回 undefined，因为它没有下一个兄弟。如果您想通过调用next() 连续访问节点，我认为您可能需要实现Iterator pattern。

jQuery 对象是一个项目数组。您可以将当前索引存储在一个变量中，并在获取下一个元素后将其递增。

// Naive way
var items = $("#container .swaps");
var i = 0;
items[i++] // first <a>
items[i++] // second <a>

这里有两个使用迭代器模式包装上述功能的实现——一个作为 jQuery 插件工作，另一个基本上是一个单独的函数。两者的工作方式相同：

// Iterator function
function Iterator(list) {
    var results = list;
    var i = 0;

    this.next = function() {
        return results[i++];
    };

    return this;
}

// Usage
var iterator = Iterator($("#container .swaps"));
iterator.next() // first <a>
iterator.next() // second <a>

第二个与第一个几乎相同，但使用的是 jQuery 插件：

// jQuery plugin
$.fn.iterator = function() {
    var i = 0;

    this.next = function() {
        return this[i++];
    };

    return this;
};

// Usage
var iterator = $("#container .swaps").iterator();
iterator.next() // first <a>
iterator.next() // second <a>

Javascript 1.7 在generators and iterators 中有一些很酷的功能可以做到这一点，但它还没有普及——据我所知只有 Firefox 支持它。

【讨论】：

感谢您提供非常全面的回答。

【解决方案3】：

首先，我知道这不是您的代码，但 ID 不应以数字开头或仅包含数字。

我不确定您要做什么，但我认为如果您像这样遍历所有 .swaps 会更容易：

$('#container .swaps').each(function(){
 var swapImg = $(this).find('img');
 // do something else
})

【讨论】：

【解决方案4】：

你的选择器应该是

var thisone = $("div.container a.swaps:first");
var img = thisone.children(img);

你的身份证也是无效的。 id 不能以数字开头。

【讨论】：

【解决方案5】：

next() 方法检查兄弟姐妹是否匹配...在您的场景中，没有其他具有 .swaps 类的兄弟姐妹...尝试 $("#container .swaps")

【讨论】：

【解决方案6】：

因为，正如 Jquery 文档所说：

:first 伪类是等价的到：eq（0）。也可以写成 :lt(1)。虽然这仅匹配单个元素，:first-child 可以匹配不止一个：每个父母一个。

尝试使用.children() 如$(selector).children();

【讨论】：

【解决方案7】：

在您的示例中，thisone.next() 实际上应该什么也得不到，因为原始选择没有兄弟姐妹（在同一级别）。你想要的是thisone 的孩子，也就是一个img，使用thisone.children("img")。

【讨论】：

【解决方案8】：

您正在使用:first，它将集合减少到一个，因此没有“下一个”。您可以尝试改用:first-child。

【讨论】：