CODEWITHSUNDEEP
jquery
Francesco
Francesco

Reputation: 25259

what's the more elegant way to use an id already set? jQuery("#"+ t)?

i'm kinda of a newbie in javascript, even though i built so far lots of working website and apps..

btu i feel naive the way i used to pass the variable id to jquery.. for instance i used to do like this epsecialy when i have to work with some old code .. let's assume that i have all my website already coded with 'a' tags like this

<a id='myId' onclick='doSome(this.id)' > link </a>

and then in JS

function doSome(id){

//old code removed and replaced by jquery
    jQuery("#"+ id).show();

}

and the function in that way works flawless...

so, again, assuming that i cannot change anything else than the code inside the function what's the best way to use the variable id? because as far as i know if I had used just

jQuery(id).show();

instead of

jQuery("#"+ id).show();

it wouldn't have worked...right?

Upvotes: 1

Views: 142

Answers (5)

Peter Ajtai
Peter Ajtai

Reputation: 57695

bobince already covered how to use $(document.getElementById(id)) if you cannot change the code.

I just wanted to add the use of arguments and some examples that are better than inline JS:

I would simply pass the clicked element instead of passing the ID and then finding the element again.

It's a good practice to separate markup from functionality. This helps with maintainability and accessibility.

So I would write your HTML like this:

<a id='myId'> link </a>

To attach a click handler to a particular anchor, I would use the ID to target it, making use of jQuery selectors. Here's what doSome() and the handler would look like:

function doSome() {

      // Make use of the automatically created
      //   arguments array. This can make things
      //   very flexible.
    arguments[0].hide();

      // You can't click on invisible elements, so 
      //   maybe you meant hide() and not show()?
}

  // When the document is ready....
$(function() {
    $("#myId").click(function(event) {

          // call doSome with the element
        doSome($(this));

          // prevent the page changing
        event.preventDefault();
    });
})

jsFiddle example

If you want to target all tags instead of just one:

$("a").click(function(event) {

      // call doSome with the element
    doSome( $(this) );

      // prevent the page changing
    event.prevendDefault()
});

And here is why using arguments can be so useful. With it, it's easy to hide all elements passed to doSome:

function doSome() {
    $.each(arguments, function() {
        this.hide();
    });    
}

jsFiddle example

Upvotes: 1

bobince
bobince

Reputation: 536587

jQuery(id).show();

indeed doesn't work, because the argument to the jQuery/$ function is a selector, not an ID.

'#'+id works as a selector, but only as long as the characters in the id are valid for use in a selector and don't need escaping.

In HTML4/XHTML1, only the alphanumerics plus .:-_ are valid in IDs, so you only have to worry about . and :. If you did '#'+id where id was a.b you'd actually be selecting an element with ID a and class b. In HTML5 many more characters are valid in IDs, so crudely appending the id to # is even less reliable.

Using the plain old DOM instead of a selector is less jQuery-ish, but it's safer and (trivially) faster:

$(document.getElementById(id))

In any case, relying on an id to select an element when you already have access to that element is silly: document.getElementById(this.id) is obviously going to be the same as this.

If you can change the markup at all, you would be better off just passing this to the function, then you could lose the selector/getElementById, and if you don't need it for anything else you could lose the id attribute too. Even better, avoid inline event handler attributes completely and assign the event handler from script, eg using jQuery $('#myId').click(function() { ... });; inside the function, this will be the element in question.

Though I don't quite understand what the code is supposed to do... show()ing the myId onclick of myId seems a bit redundant as it'd have to be shown already in order for you to have clicked on it.

Upvotes: 6

Rohrbs
Rohrbs

Reputation: 1855

Instead of passing this.id, pass this

Then you can call the function like:

$(id).show();

Upvotes: 5

Topera
Topera

Reputation: 12389

This code:

jQuery("myId").show();

Will lookup for tags that have this name, not id.

See syntax:

jQuery("myTag");
jQuery("#myId");
jQuery(".myClass");

See jQuery selectors API.

Upvotes: 0

Andrew Bullock
Andrew Bullock

Reputation: 37398

Correct, it requires the # as its a css selector. You can't tidy that up any more apart from using the $ instead of jQuery (assuming you have no conflicting scripts already using the $

Upvotes: 0

Related Questions