使用 jQuery 从代码中指定的元素中选择具有给定类的下一个元素

Question

我现在已经尝试了很多选择！

我有一组包含缩略图的元素，这些缩略图由 ASP 重复创建并通过 AJAX 加载动态呈现到页面，其中有一些图标，单击这些图标会放大图像。

重复的 HTML 看起来像这样：

    <div class="prodImgContainer">
        <img src="*url*" id="*id*" class="itemImages" />
        <div class="imgControl">
            <span class="tinyIcons tinyDelete imgDelete" id="delete*id*"></span>
            <br />
            <span class="tinyIcons tinyZoom imgZoom" id="zoom*id*"></span>
        </div>
    </div>

因此，当您使用 imgZoom 类进行任何操作时，它都会触发放大。这是通过我用于加载模式窗口的标准函数来完成的。

    $('.imgZoom').live('click', function () {
        var prodId = $('#productId').val();
        var thisImage = ($(this).attr('id').replace('zoom', '')).replace('-tb', '');
        var img = $("<img />").addClass('nextImg').attr('id', 'thisImg' + thisImage).attr('src', '*BASE URL *' + prodId + '/' + thisImage + '.jpg').load(function () {
            if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                alert('broken image!');
            } else {
                $("#largeImgContainer").empty();
                $('#showImg').click();
                $("#largeImgContainer").css('display', 'none').append(img).delay('1000').fadeIn('slow');
            };
        });
    });

上面的代码将放大的图像加载到现有容器中。

现在...我希望能够通过单击创建的图像来触发下一个 imgZoom 元素上的 click 事件。

不过，调用元素不再在代码中，所以我尝试这样做：

    $('.nextImg').live('click', function () {
        var nextImage = ($(this).attr('id').replace('thisImg', '')).replace('-tb', '');
        $('#zoom' + nextImage + '-tb').next('.nextImg').click();
    });

在这里，我能够确定最初单击以打开此图像的元素的 ID，

然后我期待 $ ('#zoom' + nextImage + '-tb').next('.nextImg').click(); 查找该元素，然后查找下一个具有 nextImg并单击它

但是它不起作用...我错过了什么？

Answer 1

您应该能够将单击附加到动态创建的图像元素，以触发对下一个 imgZoom 元素的单击，即类似：

...
$("#largeImgContainer").empty();
$('#showImg').click();
$("#largeImgContainer").css('display', 'none').append(img).delay('1000').fadeIn('slow');

// here 'this' refers to the imgZoom element that was clicked
var nextElement = $(this).next('.imgZoom'); 
img.click(function() {
    nextElement.click(); // trigger the click
});
...

Answer 2

我自己也犯过同样的错误，但是 .next() 不能那样工作。它的作用是仅当 DOM 中当前元素与选择器匹配时才返回紧随其后的元素，否则不返回任何元素。

如果您想要 DOM 中当前选定元素之后的第一个元素与特定选择器匹配，您可以使用如下内容：

$('#zoom' + nextImage + '-tb').nextAll('.nextImg:first').click();

Answer 3

next() 仅返回 DOM 中的下一个元素（紧随其后的元素），您可以

  //this gets the DOM element
  var nextImg = $('#zoom' + nextImage + '-tb').nextAll('.nextImg')[0];
  //wrap this in jQuery and click it
  $(nextImg).click();

从文档中获取

给定一个表示一组 DOM 元素的 jQuery 对象，
.next() 方法允许我们搜索紧随其后的内容
DOM 树中这些元素的同级元素并构造一个新的 jQuery
来自匹配元素的对象。

该方法可以选择接受相同类型的选择器表达式
我们可以将其传递给 $() 函数。如果紧随其后的是
兄弟匹配选择器，它保留在新构造的中
jQuery 对象；否则排除。

Answer 4

很难理解你想要什么，你的文字和代码之间存在差异。

也许这一行

$('#zoom' + nextImage + '-tb').next('.nextImg').click();

会起作用：

$('#zoom' + nextImage + '-tb').parents('.prodImgContainer').next('.prodImgContainer').find('.imgZoom').click();

我不明白的是：“-tb”的用法 - 它在哪里是 id 的一部分，哪里不是？为什么调用 .next('.nextImg')？我以为您想单击下一个 imgZoom 元素。在您的代码中，只有 largeImgContainer 中的（单个）图像具有 nextImg 类。

Answer 5

啊啊！！

以上均无效，但感谢您的帮助。

我最终创建了一个图像数组并传递了位置，以便下一个图像单击将在数组中的下一个位置打开文件。