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

n3h0vuf2  于 2023-05-17  发布在  jQuery
关注(0)|答案(8)|浏览(568)

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

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

2nc8po8w

2nc8po8w1#

在您的示例中,thisone.next()实际上不应该得到任何东西,因为原始选择没有同级(在同一级别)。您需要的是thisone的子元素,即img,使用thisone.children("img")

rqqzpn5f

rqqzpn5f2#

您的选择器应该是

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

您的ID也无效。你不能用数字开始一个id。

5f0d552i

5f0d552i3#

首先,我知道这不是你的代码,但ID不应该以数字开头或只包含数字。
我不知道你想做什么,但我认为如果你像这样迭代所有的.swaps会更容易:

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

vulvrdjw4#

HTML是真实的的吗?我没有看到任何id为“container”的元素
$("#container .swaps:first")
另外,如果是真实的的HTML,您应该稍微修改一下(关闭img标记,并在之前添加span的开始标记)
假设您的HTML是OK的,这应该适用于您的场景。

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

IMG不是锚的兄弟,是子。

ecbunoof

ecbunoof5#

正如Jquery docs所说:
:first伪类等价于:eq(0)。它也可以写成:lt(1)。虽然这只匹配一个元素,但:first-child可以匹配多个元素:每个家长一个。
尝试像在$(selector).children();中那样使用.children()

mnowg1ta

mnowg1ta6#

next()方法检查同级是否匹配...在您的场景中没有其他同级具有.swaps类... try $(“#container .swaps”)

8xiog9wr

8xiog9wr7#

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模式 Package 上述功能的实现-一个作为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支持它。

jexiocij

jexiocij8#

您使用的是:first,它将集合缩减为一个,因此没有“next”。您可以尝试使用:first-child

相关问题