jQuery scope for parent ID

Question

Hi! I was wondering how I would go about implementing this:

<div id="1234345" class="item">
<script type="text/javascript">
function getItem() {
alert($(this).attr('id')); // I want this to be 1234345
}
getItem();
</script>
</div>

<div id="1239345" class="item">
<script type="text/javascript">
function getItem() {
alert($(this).attr('id')); // I want this to be 1239345
}
getItem();
</script>
</div>

Neither of them work, but I need to make sure that both sections have exactly the same code, but return the right ids.

Answer 1

You have how javascript interacts with html backwards, the js there is not run in the context of the script-tag.

Answer 2

I think the $(this) is the id of the element who called the function, which is the document in this case not the div.

check this out, it's a good read: http://www.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/

Answer 3

In addition to fredrikholmstrom's answer the second "getItem" function will destroy the first one, so you will get a single one.

Answer 4

<div id="1234345" class="item">
  <script type="text/javascript">
    document.write('<div id="unique_id"></div>');
    function getItem() {
      alert($('div#unique_id').parent().attr('id')); // this will be 1234345
      $('div#unique_id').remove();
    }
    getItem();
  </script>
</div>

Answer 5

First of all your id is not according to HTML 4 spec

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

And

Do not mix your javascript with HTML markup. Keep both as separate.

You can use

$(".item" ).attr ( "id" );

to get the id of the divs

Answer 6

Is it this what you actually had in mind?

<div class="item">
<input type="hidden" value="1239345"/>
<span class="button">Click me</span>
</div>

<div class="item">
<input type="hidden" value="45454443"/>
<span class="button">Click me</span>
</div>

<script type="text/javascript">
$('div.item span.button').click(function()
{
    alert($(this).closest('div.item').children('input[type=hidden]').val())
})
</script>

Answer 7

Given this markup

<div id="1234345" class="item"></div>
<div id="1239345" class="item"></div>

the jQuery way to get the ids would be

$(function() {

    // get an array of the matching element ids
    var ids = $.map($('div.item'), function(v) { return v.id });

    // concatenate string from the array values
    alert(ids.join(','));

});

or maybe you wanted an click event handler for each <div class="item">

$(function() {

    // attach a click event handler to all <div class="items">
    // that exist when DOM has finished loading
    $('div.item').click(function() { 
        alert(this.id);
    });

});

Answer 8

$(document).ready(function(){    
  $(".item").each(function(){ 
      $("#"+this.id).html(GetItem(this.id));
       });
 });

You can add this to you page. should work unless you wanted to tie it to a click event for any ".item"