jQuery的多重选择器+ find（）vs children（） [英] jQuery's multiple selector + find() vs children()

问题描述

< select id =select1>
< option value =11> 11< / option>
< option value =12> 12< / option>
< / select>

< select id =select2>
< option value =21> 21< / option>
< option value =22> 22< / option>



find ）和 children（）方法：

find（） ：


$ b

 find（'option：not（：first）'）。remove（）; 
  $（'＃select1，＃select2'）。 > 

按预期工作： select1 只有选项 11 和 select2 只有选项 21

： lang（）：select（'select'，＃select2'）。children（'option：not（：first）'）。remove（）;

奇怪地工作： select1 只有选项 11 但是 select2 已经没有选择了...

为什么？

演示

解决方案

从我看到的

  $（'＃select1，＃select2'）。find（'option：not（：first）'）
  

等于

  $（'＃select1 option：not（：first），＃select2 option：不是（：first）'）
  

不是

  $（'＃select1，＃select2'）。children（'option：not（：first）'）
   
 
考虑上下文选择器，因为它与使用.find（）相同。 c> $（'option：not（：first）'，$（'＃select1，＃select2'））
  

通过使用第一个孩子..你只得到第一个孩子选项返回在集合..而上下文/ find选择器查找每个上下文中的第一个

<select id="select1">
    <option value="11">11</option>
    <option value="12">12</option>
</select>

<select id="select2">
    <option value="21">21</option>
    <option value="22">22</option>
</select>​

Behavior of the find() and the children() methods:

find():

$('#select1, #select2').find('option:not(:first)').remove();​​​​​​

Works as expected: select1 has only option 11 and select2 has only option 21

children():

$('#select1, #select2').children('option:not(:first)').remove();

Works weirdly: select1 has only option 11 but select2 has no option anymore...

Why?

Demo

解决方案

From what I see

$('#select1, #select2').find('option:not(:first)')

is equal to

$('#select1  option:not(:first), #select2  option:not(:first)')

not

$('#select1, #select2').children('option:not(:first)')

Think about the context selector as it's the same as using .find()

$('option:not(:first)',$('#select1, #select2'))

By using children with first.. you are only getting the first children option returned in collection.. whereas the context/find selector looks for the first in each context

这篇关于jQuery的多重选择器+ find（）vs children（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！