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

k4emjkb1 于 2023-06-22 发布在 jQuery

关注(0)|答案(5)|浏览(128)

我已经尝试了很多选择了！
我有一组包含缩略图的元素，由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的下一个元素并单击它
但它不工作…我错过了什么

jquery

来源：https://stackoverflow.com/questions/9381073/selecting-the-next-element-with-a-given-class-from-an-element-specified-in-code

5条答案

按热度按时间

m0rkklqb1#

您应该能够将单击附加到动态创建的图像元素上，以触发对下一个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
});
...

赞(0）回复(0）举报 2023-06-22

iibxawm42#

我自己也犯过同样的错误，但是.next（）不是这样工作的。它所做的是返回紧接在DOM中当前元素之后的元素**，只有当**它匹配选择器时，否则它不返回任何元素。
如果你想让DOM中当前选中的元素之后的第一个元素与特定的选择器匹配，你可以使用这样的方法：

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

赞(0）回复(0）举报 2023-06-22

vjrehmav3#

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对象中;否则将其排除。

赞(0）回复(0）举报 2023-06-22

ecbunoof4#

很难理解你想要什么，你的语言和代码之间存在差异。
也许这条线

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

这将起作用：

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

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

赞(0）回复(0）举报 2023-06-22

3xiyfsfu5#

啊！
以上都不起作用，但谢谢你的帮助。
我最终创建了一个图像数组，并传递了位置，因此下一个图像单击将打开数组中下一个位置的文件。

赞(0）回复(0）举报 2023-06-22

我来回答

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

5条答案

相关问题

热门标签

最新问答