[英]jQuery selector for multiple elements
I know this isn't a code issue related question, but it's something I'd love to know and it may help others: 我知道这不是与代码问题有关的问题,但是我很想知道这点,它可能会对其他人有所帮助:
What's the difference between using this: 使用这个之间有什么区别:
$(function() {
var $fullArea = $('#full-sized-area');
var $fullContent = $('#full-sized-content', $fullArea);
});
Over say this: 这么说:
$(function() {
var $fullArea = $('#full-sized-area');
var $fullContent = $('#full-sized-content, #full-sized-area');
});
Both are quite difference. 两者是完全不同的。
Basically you are using Multiple Selector (“selector1, selector2, selectorN”) in the following line. 基本上,您在下面的行中使用多重选择器(“ selector1,selector2,selectorN”) 。 So its simple
所以很简单
$('#full-sized-content, #full-sized-area')
Where as in line you are using context based selector, Here you are selecting element with ID full-sized-content
in childs of $fullArea
$fullArea
,您正在使用基于上下文的选择器,在这里您正在选择$fullArea
元素中ID为full-sized-content
$fullArea
full-sized-content
的$fullArea
var $fullContent = $('#full-sized-content', $fullArea);
is equivalent to 相当于
var $fullContent = $('#full-sized-area').find('#full-sized-content');
Note As IDs must be unique in HTML you can simply use 注意由于ID在HTML中必须唯一,因此您可以简单地使用
var $fullContent = $('#full-sized-content');
There is a difference, 它们是有区别的,
Demo : Multiple selector 演示:多重选择器
var $fullContent = $('#full-sized-content, #full-sized-area');
Selects both the elements - Multiple selector : $('#elem1,#elem2,...')
选择两个元素- 多重选择器 :
$('#elem1,#elem2,...')
var $fullContent = $('#full-sized-content', $fullArea);
In this case : #full-sized-content
has to the child of #full-sized-area
在这种情况下:
#full-sized-content
必须属于#full-sized-area
的子#full-sized-area
So its is equivalent to 所以它等同于
$('#full-sized-area #full-sized-content');
Parent Child
Both are diffent here.. 两者都在这里不同。
$(function() {
var $fullArea = $('#full-sized-area');
var $fullContent = $('#full-sized-content', $fullArea);
});
This one select element which has id "full-sized-content" under the #full-sized-area element 在#full-size-area元素下具有id“ full-size-content”的一个选择元素
$(function() {
var $fullArea = $('#full-sized-area');
var $fullContent = $('#full-sized-content, #full-sized-area');
});
This one select both element with the ID full-sized-content and full-sized-area 这一个选择ID为full-size-content和full-size-area的元素
var $fullContent = $('#full-sized-content', $fullArea);
The above actually a context based selector. 上面实际上是一个基于上下文的选择器。 So, what is does in simple manner is:-
因此,简单的操作是:
$fullArea // get the fullArea element
.find('#full-sized-content') // find all the descendants with this id inside it
While the code below means: 虽然以下代码表示:
// Get both the elements with id full-sized-content & full-sized-area
var $fullContent = $('#full-sized-content, #full-sized-area');
It's like a combined selector. 这就像一个组合选择器。 So, if you do the below thing for 1st code:-
因此,如果您对第一个代码执行以下操作:
$fullContent.css('color', 'red');
It will only make the color red for the element #full-sized-content
inside $fullArea
Whereas if you use the same code for the 2nd part, it will color both the full-sized-content
& full-sized-area
elements. 对于
$fullArea
#full-sized-content
$fullArea
#full-sized-content
元素,它只会使颜色$fullArea
而如果第二部分使用相同的代码,它将为full-sized-content
$fullArea
full-sized-content
和full-sized-area
元素着色。
Your code: 您的代码:
var $fullContent = $('#full-sized-content', $fullArea);
it says find me #full-sized-content
in $fullArea
, because of the ,
. 它说我找
#full-sized-content
在$fullArea
因为, ,
。 ,
makes a context for this. ,
为此提供了一个上下文。
This code: 这段代码:
var $fullContent = $('#full-sized-content, #full-sized-area');
is usually called a muliple selector selection which is a string with ,
separated elems while below 通常被称为多选择器选择 ,它是一个字符串,带有
,
在下面是分隔的
var $fullContent = $('#full-sized-content', $fullArea);
is usually finds an element in a given context which is ,
separated elems. 通常发现在给定的上下文中是一个元件
,
分离elems的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.