关于div中的类的问题答案

【问题标题】：Question about class in div关于div中的类的问题
【发布时间】：2011-07-12 06:32:40
【问题描述】：

如果我有这个代码：

 <div id="one">
        <label>first</label> 
        <select name="area" class="area">
        <option selected="selected">First</option>
    </div>

 <div id="two">
        <label>second</label> 
        <select name="area" class="area">
        <option selected="selected">Second</option>
 </div>

这样的可能吗？

  $("#one: .area").change(function() {}

or 

 $("#two: .area").change(function() {}

它不起作用，有人可以解释为什么吗？

【问题讨论】：

标签： jquery html css css-selectors

【解决方案1】：

试试：

<div id="one">
        <label>first</label> 
        <select name="area" class="area">
        <option selected="selected">First</option>
         </select>
    </div>

 <div id="two">
        <label>second</label> 
        <select name="area" class="area">
        <option selected="selected">Second</option>
        </select>
 </div>

$("#one select.area").change(function() {}

【讨论】：

精度好 - 我经常看到选择器太模糊，从而得到太多对象。

【解决方案2】：

这可能就是你想要的

$("#one > select.area").change(function() {});

或

$("#two > select.area").change(function() {}

还要确保结束您的选择标签。您有以下 HTML

<div id="one">
    <label>first</label> 
    <select name="area" class="area">
    <option selected="selected">First</option>
</div>

应该是

<div id="one">
    <label>first</label> 
    <select name="area" class="area">
        <option selected="selected">First</option>
    </select>  <!-- Note the Ending tag for the select -->
</div>

【讨论】：

只有当你能保证它是一个直接的孩子时才有效。
+1，尤其适用于使用select.area 而不仅仅是.area。
@josh.trow：考虑到问题中的代码示例，我认为这是一个安全的假设。
@Town：是的，但我不希望 Fel 回来抱怨当他把它放在另一个样式 div 或其他东西中时它不起作用。

【解决方案3】：

删除代码中的:... $("#one .area") 关闭您的选择元素</select>

也是一个好习惯

【讨论】：

【解决方案4】：

是的，但您应该删除选择器中的:。

$("#one .area").change(function() { alert($(this).val()) });

【讨论】：

【解决方案5】：

你的选择器中有一个多余的:，使用：$("#one .area").change(function() {});

查看示例：http://jsfiddle.net/fermin/9YM3a/1/

【讨论】：

【解决方案6】：

如果您要问如何选择.area，它是#one 或#two 的孩子，那么您几乎是对的。

$('#one > .area').change(function() {}

> 表示“的孩子”，因此您将选择 .area，即 #one 的孩子

【讨论】：

省略> 不太具体，但意味着如果在<select> 周围添加像<div class="one_inner"> 这样的div，选择器仍然可以工作

【解决方案7】：

您可以将 div 设置为范围。

$('.area',$(this).parent('div:one')).change(function() {}

【讨论】：