1 Replies - 1841 Views - Last Post: 28 September 2011 - 06:20 AM

#1 satis   User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

string together jquery selectors

Posted 27 September 2011 - 06:04 AM

Pardon if this has a simple answer. I've perused the jquery documentation and google without much help, but I may not be looking for the right things.

I'm using jquery to avoid cross-browser problems (I hate you IE). Here's the code I'm currently using.

		var playControls = $(that.element).find('.controls')[0];
		$(playControls).find('img[title="Play"]')
			.attr({ src: 'images/icons/stopNew.png', title: 'Stop' })
			.unbind('click')
			.unbind('mouseover')
			.unbind('mouseout')
			.click(that.stopVideo)
			.mouseover(function(){ $(this).attr({ src: 'images/icons/stopNewOver.png' }) })
			.mouseout(function(){ $(this).attr({ src: 'images/icons/stopNew.png' }) });


I'm finding the controls within that.element (which is just an element reference stored in my class). Then I'm using another jquery selector to find an image element with the name play and doing some manipulation on it. Is there some way to string together those two selectors? I have to start from within that.element as there may be multiple elements with a class of .controls.

Is This A Good Question/Topic? 0
  • +

Replies To: string together jquery selectors

#2 satis   User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: string together jquery selectors

Posted 28 September 2011 - 06:20 AM

Well, I figured it out. In case anyone else runs into this, this is how to do it. I'm going to use different code since the stuff I posted above is a bit convoluted (and doesn't work anyway for other reasons).

Say you start with an element reference of this.element. You want to find an element with a class name of image within that, select the first instance, then find a tag of type IMG within that result set and return the source.

First turn this.element into a jquery object and find the image classname and get the first instance.

$(this.element).find('.image')[0]



Straight forward so far. At this point you have an HTML element returned. You have to turn that into a jquery object again, so you wrap the whole thing in $(). At that point, you can do a find for the IMG tag.

$($(this.element).find('.image')[0]).find('IMG')[0]



This returns the first image tag. To get the source, you can then just grab .src right off of it. Complete code:

alert($($(this.element).find('.image')[0]).find('IMG')[0].src);



Once I figured it out, it was self-evident. *shrug*
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1