jquery selector not working, why?

问题

I simply want to manipulate the elements within the #content div, but $('#content') doesn't seem to work, and yet in other places it does! My relevant code is very simple:

HTML

<body>
  <input type='button' value='Save design' id='save'  />
  <div id="content" style="height: 200px; width:600px;border: 1px solid black;" class='whatev'></div>
</body>

Script

$(document).ready(function(){   
   $('#save').click(function(e){
     alert( document.getElementById('content').id); // this works!
     alert($("#content").length); // this works! it outputs "1"
     alert($("#content").id); // this does NOT work - undefined, why?
     //end save function
   });

    $('#content').click(function(e){ 
       // do stuff // ALL of this works!
    });
});

That is it. If you notice, it does work in some places (the entire click function bound to it is perfectly fine), but where it doesn't work, it strangely does still exist because length = 1. I tried using context as well to search the div, just in case, (using $('#content','body')), but no use.

回答1:

There is a difference between a DOM element and a jQuery selection that contains a DOM element. A jQuery selection is a wrapper around the DOM object to make it easier to use. It doesn't have an id property, but a DOM element does. On the other hand, jQuery does provide a way to access elements' properties using the attr method:

document.getElementById('content').id // access the id property of a DOM element
$('#content').attr('id')              // use jQuery to select the element and access the property

The length property, however, is provided by a jQuery selection, which is why that works fine for you.

回答2:

id is a plain DOM property/attribute, and works with plain DOM objects, not jQuery objects.

You would do this in jQuery:

$("#content").attr('id');

which equals:

document.getElementById('content').id

$("#content")[0].id; //[0] gets the first DOM object in the collection

回答3:

Try this

$("#content").attr("id")

回答4:

$("#content") returns the jQuery collection containing the elmenent with id content. id is an attribute of an element, not a property of the collection. You would get the element's ID by chaining the attr() method off the collection:

alert($("#content").attr('id'));

Or, when eaching the collection, inside the function passed to each this will be the actual element, so you could access this.id

$("#content").each(function () {alert(this.id);});

回答5:

For this question you should go straight to jsfiddle, and to the jquery docs for how to get attributes of html elements -> http://api.jquery.com/attr/.

The jQuery selector object itself doesn't have an attribute id. You have to use .attr('id') function.

I fixed that and everything else works, as you see in this jsfiddle: http://jsfiddle.net/AdtrX/1/

回答6:

Always remember!

In jQuery when you want to access some attribute of the selected element, you use jQuery's .attr() API.

Now you said this, document.getElementById("content").id Works, Equivalent jQuery statement of this line is

$("#content").attr('id');

For selecting attribute use .attr() For manipulating style/css use .css()

YOu can also alter CSS properties of the selected element using .attr()

Like .attr('style','your new style');

回答7:

you can get id by by using .attr("id") function. Use this code: $("#content").attr("id");

回答8:

what led me to this page is

I have this div with id LING_a_00224.s03

<div id="LING_a_00224.s03" ></div>

and when I use jquery selector to get it

$("#LING_a_00224.s03")

I got not element (jquery selector not working)

thats because the dot (.) in the id

jquery will interpret it as All elements with id="LING_a_00224" and class="s03", not All elements with id="LING_a_00224.s03"

so make sure that id selector does not contains jquery selector symbols like (.)

or if you don't have control over elements ids, you can do

selector=document.getElementById("LING_a_00224.s03");//JQuery selector sometimes fails because id may contains dot on it like #fn12.e2e
$(selector).jqueryFunction()// wrap the JavaScript object into $() to convert it to jquery object

hope this helps you

来源：https://stackoverflow.com/questions/12158457/jquery-selector-not-working-why

标签

jquery

html

javascript-events

selector