jquery 选择器不起作用,为什么?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12158457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:22:27  来源:igfitidea点击:

jquery selector not working, why?

jqueryhtmljavascript-eventsselector

提问by user961627

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:

我只是想操纵 #content div 中的元素,但$('#content')似乎不起作用,但在其他地方却起作用了!我的相关代码非常简单:

HTML

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.

这就对了。如果您注意到,它在某些地方确实有效(绑定到它的整个点击功能都很好),但在它不起作用的地方,奇怪的是它仍然存在,因为length = 1. 我也尝试使用上下文来搜索 div,以防万一,(使用$('#content','body')),但没有用。

回答by lonesomeday

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 idproperty, but a DOM element does. On the other hand, jQuery does provide a way to access elements' properties using the attrmethod:

DOM 元素与包含 DOM 元素的 jQuery 选择之间存在差异。jQuery 选择是围绕 DOM 对象的包装器,以使其更易于使用。它没有id属性,但 DOM 元素有。另一方面,jQuery 确实提供了一种使用以下attr方法访问元素属性的方法:

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 lengthproperty, however, is provided by a jQuery selection, which is why that works fine for you.

length但是,该属性是由 jQuery 选择提供的,这就是为什么它适合您的原因。

回答by adeneo

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

id是一个普通的 DOM 属性/属性,适用于普通的 DOM 对象,而不是 jQuery 对象。

You would do this in jQuery:

你会在 jQuery 中做到这一点:

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

which equals:

这等于:

document.getElementById('content').id

or

或者

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

回答by Shyju

Try this

尝试这个

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

回答by JAAulde

$("#content")returns the jQuery collection containing the elmenent with id content. idis 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:

$("#content")返回包含 id 元素的 jQuery 集合contentid是元素的属性,而不是集合的属性。您可以通过将attr()方法链接到集合中来获取元素的 ID :

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

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

或者,当eaching 集合时,传递给的函数内部eachthis将是实际元素,因此您可以访问this.id

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

回答by jeffery_the_wind

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/.

对于这个问题,您应该直接转到 jsfiddle,然后转到 jquery 文档以了解如何获取 html 元素的属性 -> http://api.jquery.com/attr/

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

jQuery 选择器对象本身没有属性id。你必须使用.attr('id')函数。

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

我修复了这个问题,其他一切正常,正如你在这个 jsfiddle 中看到的:http: //jsfiddle.net/AdtrX/1/

回答by AdityaParab

Always remember!

总记得!

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

在 jQuery 中,当您想要访问某些attribute选定元素时,您可以使用jQuery.attr()API。

Now you said this, document.getElementById("content").idWorks, Equivalent jQuerystatement of this line is

现在你说这个, document.getElementById("content").idWorks,jQuery这行的等效语句是

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

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

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

用于选择属性使用.attr()用于操作样式/css 使用.css()

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

您还可以使用更改所选元素的 CSS 属性 .attr()

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

喜欢 .attr('style','your new style');

回答by Sunil Marwaha

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

您可以使用 .attr("id") 函数获取 id。使用此代码: $("#content").attr("id");

回答by Basheer AL-MOMANI

what led me to this page is

是什么让我来到这个页面

I have this div with id LING_a_00224.s03

我有这个带有 id 的 div LING_a_00224.s03

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

and when I use jquery selector to get it

当我使用 jquery 选择器来获取它时

$("#LING_a_00224.s03")

I got not element(jquery selector not working)

我得到了not element(jquery 选择器不起作用)

thats because the dot (.)in the id

那是因为dot (.)the id

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

jquery 将interpret它作为所有元素id="LING_a_00224" and class="s03",而不是所有元素id="LING_a_00224.s03"

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

所以请确保 id 选择器不包含像 ( .)这样的 jquery 选择器符号

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

或者如果你don't have control在元素上 ids,你可以做

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

希望这对你有帮助