document.getElementById() alternative in jQuery

Question

UPDATE: I'm sorry that my thread was misinterpreted by many users. I'll try to be more clear. I'm using Drupal and I have created three floating banners. On the frontpage there is a block (block1) that displays one floating banner and after refresh the second one is appearing and for the third too. Like a wrote before these banners has a little X button to stop overflow. I've putted this script in a one of the banners and it's working great.

<script language="javascript">
function doexpand() {
    document.getElementById("block1").style.overflow = "visible";
}

function dolittle() {
    document.getElementById("block1").style.overflow = "hidden";
}    
</script>

The real problem is that in categories pages I have #block2 and in articles #block3. These block are displaying the same banners. The code over is working only for a one ID. In this case #block1. document.getElementById is not working for more ID's as I read from other topics.

I've tried with jQuery with two blocks idents like this:

(function ($) {

    function doexpand() {
     $("#block1,#block2").css("overflow","visible");
    }
    function dolittle() {
     $("#block1,#block2").css("overflow","hidden");
    }

    })(jQuery);

It's not working. The firebug/console displays: ReferenceError: doexpand is not defined.

I've tried with a single block too with jQuery like this:

(function ($) {

        function doexpand() {
         $("#block1").css("overflow","visible");
        }
        function dolittle() {
         $("#block1").css("overflow","hidden");
        }

        })(jQuery);

and it's displaying the same error.

Note: Drupal has a different wrapping and it's like this:

(function ($) {
        //your existing code
    })(jQuery);

You should never have more than one HTML element with the same ID. — Darren, Jun 25 '13 at 07:35
Please make a search before making a post. i hope its simple once we can able to find it in. — Hariharan, Jun 25 '13 at 07:35
very first google search gives : http://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery — codeomnitrix, Jun 25 '13 at 07:37
Why do everybody seem to think that OP gave the same ID to more than one element ? — Denys Séguret, Jun 25 '13 at 07:40
@dystroy I'm wondering that too. I received many minuses for that, I guess. — user2519032, Jun 25 '13 at 07:46
+1, I don't see any reason for so many down votes, it's valid issue & seems misinterpreted by many. — Pranav Singh, Jun 25 '13 at 07:49

score 3 · Answer 1 · answered Jun 25 '13 at 07:47

Please have a look on jQuery Selectors.

I think in your case, it is better to apply style with help of css for multiple elements. e.g. :

<script language="javascript">
function doexpand() {
    $('.block').style.overflow="visible";
}
function dolittle() {
    $('.block').style.overflow="hidden" ;
}
</script>

Please add class="block" to all of blocks for which you want to apply this style/function, it will apply on all of the blocks having css class "block".

score 1 · Answer 2 · answered Jun 25 '13 at 07:37

jQuery?

HTML:

<div class="block2"></div>

JS:

function doExpand(selector) {
    if ( $(selector).length ) {
        $(selector).css({'overflow':'visible'});
    }
}

Calling with non ID selector would look like this: (jQuery syntax): doExpand('.block2');

score 0 · Answer 3 · answered Jun 25 '13 at 07:36

The above code is perfectly valid in jQuery (which is a JavaScript library).

If you want to use a more typical jQuery code, you can do

$('#block1').css('overflow', 'visible');

You can expend it to multiple id like this :

$('#block1, #block2').css('overflow', 'visible');

You always can get the DOM object from a jQuery object, which means you could also have adapted your code to use jQuery selectors using

$('#block1').get(0).style.overflow="visible";

(this specific example isn't smart : no need to use jQuery if you don't use a complex selector or jQuery functions)

score 0 · Answer 4 · answered Jun 25 '13 at 07:37

Pretty simple really, jQuery selection is based on css selectors for the most part. These selectors are then translated into an array of dom objects held in a jQuery object.

function doexpand() {
 $("#block1").css("overflow","visible");
}
function dolittle() {
 $("#block1").css("overflow","hidden");
}

score 0 · Answer 5 · answered Jun 25 '13 at 07:37

You should never have more than one HTML element with the same ID (Which is why document.getElementById only returns one element)

You can just refeerence block2, block3 directly document.getElementById("block2").style.overflow="hidden" ;

Or use getElementByClassName

var elements = document.getElementsByClassName("yourClass")

Which will pick up all elements with a specific class.

If you want to use jQuery like the other answers are suggesting you can match on the element name. For example:

$('div[id^="block"]').css("overflow", "visible");

This will match all div element where their ID starts with block. You can also use other wildcards such as * for contains and $ for ends with.

score 0 · Answer 6 · answered Jun 25 '13 at 07:37

Here is your Javascript Code in jQuery. I dont understand what you want do do, but you could pass the params in the function. Example under this code.

<script language="javascript">
function doexpand() {
$("#block1").css({'overflow': 'visible'});
}
function dolittle() {
$("#block1").css({'overflow': 'hidden'});
}
</script>

Here is it

<script language="javascript">
function doexpand(element) {
$("#" + element).css({'overflow': 'visible'});
}
function dolittle(element) {
$("#" + element).css({'overflow': 'hidden'});
}
</script>

Than you could call it like: doexpand("theIDofTheElement");

score -1 · Answer 7 · answered Jun 25 '13 at 07:37

-1

Alternative to document.getElementById("an_element); in Jquery is: $("#an_element"); It will work fine in JQuery, it's just that JQuery makes things faster and less verbose.

answered Jun 25 '13 at 07:37

michaelm244

147
1
8

document.getElementById() alternative in jQuery

7 Answers7

Linked

Related