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是真的吗？我没有看到任何带有“容器”的元素而你正在做

$("#container .swaps:first")

另外，如果它是真正的HTML，你应该稍微修改一下（关闭img标签，并在＆lt; / TD＆gt;之前添加跨度的开始标记）

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

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

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

Answer 2

因为，正如Jquery文档所说：

：第一个伪类是等价的 to：eq（0）。它也可以写成：LT（1）。虽然这只匹配一个单个元素，：first-child可以匹配不止一个：每个父母一个。

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

Answer 3

next（）方法检查兄弟姐妹的匹配...在你的场景中没有其他兄弟姐妹用.swaps类...试试$（“＃container .swaps”）

Answer 4

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>

以下是使用Iterator模式包含上述功能的两个实现 - 一个用作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支持它。

Answer 5

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

Answer 6

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

Answer 7

你的选择器应该是

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

此外，您的ID无效。你不能用数字开始id。

Answer 8

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

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

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

jQuery next（）关于彼此不相邻的元素

8 个答案: