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

Posted 2023-02-25

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

【英文标题】：Selecting the next element with a given class from an element specified in code with jQuery

【发布时间】：2012-02-21 16:19:27

【问题描述】：

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

我有一组包含缩略图的元素，由 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 类的下一个元素并单击它

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

【问题讨论】：

我自己也犯了同样的错误，但.next() 不是这样。它的作用是返回 DOM 中当前元素之后的元素 if 匹配选择器，否则不返回任何元素。

【参考方案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
);
...

【参考方案2】：

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

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

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

【参考方案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 对象；否则，将其排除在外。

【参考方案4】：

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

也许是这一行

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

这可行：

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

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

【参考方案5】：

啊！！

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

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