logo标签列表

jQuery的next()在不相邻元素上

jquery
3

我有一些糟糕的代码要处理

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

1
тйЊТѓеУ░Ѓућеthisone.next()ТЌХ№╝їТѓеТў»тљдТГБтюет░ЮУ»ЋТЪЦТЅЙСИІСИђСИф<a class="swaps"..№╝Ъ - Anurag
问题在于我需要获取下一个元素以便进行迭代（这样下一个元素就成为当前元素，下一个元素的下一个元素就变成了下一个元素，以此类推...）。 - Rio
8个回答
4
HTML是真实的吗？我没有看到任何ID为“container”的元素，而你正在执行$("#container .swaps:first")。另外，如果这是真正的HTML，你应该稍微修复一下（关闭img标签，并在之前添加span的开头标签）。假设你的HTML没问题，那么这个方案应该可以工作。
var thisone = $("#container .swaps:first");
thisone.children();

IMG不是锚点的兄弟节点，而是其子节点。

很遗憾，它返回了一个空白。 - Rio
1

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

$("#container .swaps:first")

获取第一个锚点，调用next()返回undefined，因为它没有下一个兄弟节点。如果您想通过调用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有一些很酷的功能在生成器和迭代器方面，可以做到这一点，但它仍然不普及 - 据我所知，只有Firefox支持它。
非常感谢您提供如此全面的答案。 - Rio
1
因为，正如Jquery文档所说：

:first伪类相当于:eq(0)。它也可以被写成:lt(1)。虽然这只匹配单个元素，但:first-child可以匹配多个：每个父元素都有一个。

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

1

next() 方法检查是否存在与其兄弟元素匹配的项...在您的场景中，没有其他带有 .swaps 类的兄弟元素...尝试使用 $("#container .swaps")

0

你的选择器应该是

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

另外，你的ID无效。你不能以数字开头。

0

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

我不确定你想做什么，但如果你只是像这样遍历所有的.swaps，那会更容易：

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

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

0
在你的例子中，thisone.next() 实际上不会获取任何内容，因为原始选择中没有同级别的兄弟节点。你想要的是 thisone 的子元素，也就是一个 img，使用 thisone.children("img")。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接