why add tag name before id selector in JQuery?

Question

$('a#actionLifeEnforcement').click(function() {
        if(!validateSelectedRightsType()){
            return false;
        };
        if ($("input:checkbox:checked").length == 1) {
            $("input:checkbox:checked").each(function() {
            $('<input>').attr({
                type: 'hidden',
                id: 'id',
                name: 'id',
                value:  $(this).val()
                }).appendTo('form#formLifeEnforcement');
            });
            $('#formLifeEnforcement').submit();
            }else {//....   }
            return false;
    });

i dont understand in above code , in the jquery selector , why need add tag name before id? like a#actionLifeEnforcement and form#formLifeEnforcement ?

Answer 1

The short answer is you don't have to use the type of element before the id or class name in the selector.

The long answer is you should never have to use the element name before an id selector because ids should always be unique per page. The only reason you would ever want to specify the element type before the id is if you wanted to note to yourself what type of element you're dealing with.

When it comes to classes, however, you could most certainly be in a situation where you want to have one element of many elements with the same class name that has a certain behavior the others do not. An example of that would be something like this.

<script type="text/javascript">
 $('a.button').click(function( ){ 
     alert("I'm a link that looks like a button!"); 
     return false;
 });
 $('input.button').click(function( ){ 
     alert("I'm an input that looks like a button!"); 
     return false;
 });
</script>

<a href="#" class="button">Link</a>
<input type="submit" name="button" value="Submit Button" />

In summary: you're right to question selectors with the element type prepending the id.

Hopefully that clears things up.

Note: My example implies there is some CSS to make the 2 elements look the same. That's the reason they share the same class name.

Answer 2

suppose you have the multiple a different tags having same class let say and you want that only "a" tag having class="check" click then only your function get called,to achive this you have to write $("a.check).click(function(){}); it execute faster.

Answer 3

Although ids are unique per element in a same page but your question was that

why add tag name before id selector?

The simple answer is there is no need to do this with id selectors:

$('a#actionLifeEnforcement')

The above selector selects only anchor with the specific id but in case of class selectors that would be very significant.

But in case of class names suppose:

you have two different tags with same class names:

<a class='myclass'>dummy link</a> // an anchor with classname "myclass"
<div class='myclass'>dummy text</div> // a div with classname "myclass"

so now in js:

$('.myclass')

The above selector selects both elems because of same class names but:

$('a.myclass')
$('div.myclass')

These two selectors are different from each other and you can perform different operations this way.

Fiddle with same class names with different tags.