Jquery selector question: referencing a specific element without knowing the ID

Question

Is there a way to reference a control via a Jquery selector without knowing an ID? I was envisioning a function called on mouseover. I've been looking through the documentation but I haven't found anything yet and have the vague sense I'm missing something easy.

Update:

Zombat, that seems reasonable but I have a problem here that appears to prevent me from going the parent -> child route. This is a simple search page displaying results to a user. It was created in a code generation app called Ironspeed Designer. Ironspeed appears to be placing it's results inside an asp:repeater which is inside an update panel and the magic of Ajax is fetching me a result set. I say all of this because while it works and I can see results I should, I can't see any of this stuff in the page source. And I mean "any of this stuff". I can see the header row for the table but nothing in the way of the body; not the data nor the markup surrounding it. The markup Ironspeed generates might be kindly described as a train wreck, and that's the stuff I can see (it's enough to drive a man to MVC, I tell ya).

The element is an image. Naturally, there are many more images on the page than the ones I can concerned about.

Answer 1

Definitely. If you know the position of the element in relation to other elements, then you could come up with some unique set of DOM characteristics that would identify it.

For instance, if you know your element is always going to be the first div found inside a div with class "xyz", you could select it like:

$('div.xyz div:first-child')

The whole DOM is your oyster.

It's better to use ids when possible because if the structure of your DOM changes in the future, it could break your selectors. But it's common practice to handle unnamed elements this way, especially if they are dynamic.

Answer 2

When using jquery the selectors work like they do in css. If you want to select all paragraphs you can just say

$("p").do somthing

They can of course get much more complex as well as adding classes, names, ect as well as a few extra jquery specific selectors. You can read more about selectors on their api page.

select a form element with the name hello

$("input[name=hello]").do something

or the class hello

$(".hello").do something

---

If you want to do a mouseover you can do something like this.

$(".hello").mouseover(function(){
  //do something
}).mouseout(function(){
  //do something
});

---

update:

using firefox's web developer toolbar you can view the generated source. This will add all of the source generated by the search addon. This will help you in selecting your img correctly.

Answer 3

There are many ways to select elements. Rather than giving you an exhaustive list of examples, I would invite you to see the jQuery Selectors page.

Answer 4

Keep in mind that with jQuery you don't have to assign events (such as mouseover) to individual elements.

If I want to give every element of class foo a mouseover event, I can just do this:

$('.foo').mouseover(function(event)
{
    alert('Mouse over!');
});

and then any time any element of class foo on the page is mouseover'd, that callback will fire (with this referring to the specific object in the callback, as per Javascript's usual event handling).

Answer 5

It sounds to me like you're looking in View Source in your web browser and, because the content is being loaded via AJAX using an UpdatePanel, the content that gets loaded is not part of the original source sent to your browser, hence you;re unable to see it in the static HTML source.

First of all, you need to get a tool that will allow you to inspect the live DOM, something like Firebug for Firefox, IE Developer Toolbar for Internet Explorer or the Webkit developer tools in Google Chrome or Safari. Then you'll be able to see the id of any element that is loaded through AJAX and thus use a simple jQuery selector to get it

$('#myElement').doSomething();

Update:

If it's an image, you could try using the attributes that you can see when you right click and view the properties of it in a selector, using the selector attributes. A note though, this will not be the fastest way to get the element and you would still be better off going down the DOM inspection to find the id route. But something like the following should work

$('img[alt="alt text"][src="http://thesource.com"]').doSomething();