jQuery的下一个（）上的元素不会彼此相邻

Question

我有可怕的码位我必须处理

... 
<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()？

Answer 1

HTML是真的吗？我没有看到任何元素ID为“容器”和你做

$("#container .swaps:first")

另外，如果是真正的HTML，你应该修复它一点点（关闭img标签，并添加开幕标记为</TD >）

假设您的HTML是好的，这应该适用于您的方案。

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

IMG不是兄弟姐妹的主播，是孩子。

Answer 2

您正在使用:first，它将设置减少为1，因此没有“下一个”。您可以尝试使用:first-child。

Answer 3

在你的例子中，thisone.next()实际上应该没有任何东西，因为没有与原始选择相同的级别。你想要的是thisone的孩子，这是一个img，使用thisone.children("img")。

Answer 4

因为作为Jquery的文档说：

的：第一伪类相当于 到：当量（0）。它也可以写成 ：lt（1）。虽然这只与一个 单个元素匹配，但是：第一个孩子可以匹配多于一个的 ：每个父母一个。

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

Answer 5

下一个（）方法检查用于姐弟匹配...在您的情况有没有其他兄弟姐妹.swaps类...尝试$（“＃集装箱.swaps“）

Answer 6

你的选择应该是

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

而且你的ID是无效的。你不能用数字开始一个ID。

Answer 7

首先，我知道这不是你的代码，但ID不应该以或只包含一个数字。

我不知道你正在尝试做的，但我认为它会更容易，如果你只是通过所有的.swaps这样的循环：

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

Answer 8

jQuery的next()函数返回一个同级，因为他们出现在所有匹配元素的DOM树（而不是jQuery结果集）中。因此调用

$("#container .swaps:first") 

得到第一锚，并呼吁next()它返回undefined，因为它没有下一个兄弟。我想你可能想要实现Iterator pattern，如果你想通过调用next()连续访问节点。

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支持它，据我所知。