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

Question

I've tried loads of options now!

I have a set of elements which contain thumbnails, created by an ASP Repeated and dynamically rendered to a page by an AJAX load, within them are some icons which when clicked enlarge an image.

The repeated HTML looks like this:

    <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>

So, when you anything with the class imgZoom it fires the enlargement. This is done by a standard function which I have in place for loading modal windows.

    $('.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');
            };
        });
    });

The above code loads the enlarged image into an existing container.

Now... I want to be able to trigger a click event on the next imgZoom element by clicking the image which is created.

The calling element is no longer in the code though, so I am trying to do it like this:

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

Here, I am able to determine the ID of the element which was originally clicked to open up this image

I am then expecting $('#zoom' + nextImage + '-tb').next('.nextImg').click(); to find that element, then find the next one with the class nextImg and click it

But it doesnt work... what am I missing?

Answer 1

next() only returns the next element in the DOM (the elemement that is immediatly after it), you could do

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

Taken from the docs

Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.

The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the immediately following sibling matches the selector, it remains in the newly constructed jQuery object; otherwise, it is excluded.

Answer 2

You should be able to attach the click to the dynamically created image element to trigger a click on the next imgZoom element, ie something like:

...
$("#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 3

I've made the same mistake myself, but .next() doesn't work that way. What it does is return the element that is immediately after the current element in the DOM only if it matches the selector, otherwise it returns no elements.

If you want the first element that comes after the currently selected element in the DOM that matches a specific selector, you could use something like this:

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

Answer 4

It's hard to understand what you want, there are differences between your words and your code.

Maybe instead this line

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

this would work:

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

What I did not understand: the usage of '-tb' - where is it part of the id and where not? Why did you call .next('.nextImg')? I thought you wanted to click the next imgZoom element. In your code only the (single) image in largeImgContainer has the class nextImg.

Answer 5

Argh!!

None of the above worked, but thanks for the help.

I ended up creating an array of images and passing the position through so the next image click would open the file in the next position in the array.