jQuery 如何指定现有选择器

Question

如何在 jQuery 中对现有选择进行选择？ 这是给定的 HTML

<div id='search'>
    <form action='' method='GET'>
        <input id="searchbutton" type='submit' name='qs' value='search'>
            <div id="searchoptions">
                <input type="checkbox" checked="checked" id="search_books book" name="search_books" value="1" /><label for="search_books">book</label>
                <input type="checkbox" checked="checked" id="search_movies movie" name="search_movies" value="1" /><label for="search_movies">movies</label>
            </div>
    </form>
</div>

jQuery 部分：

$('#search').each(function(){
    //do stuff
    $(this).click(function(){
        alert('checkbox clicked');
    });
});

当然，如果 div 被单击，单击函数就会触发。 但我希望在单击复选框时触发它。 我可以这样做 $('#搜索输入：复选框') 但我需要先用#search 做一些事情。 那么如何将选择器附加到 $(this) 呢？

例如 $(this'input:checkbox')

抱歉，如果这是一个愚蠢的问题。

Answer 1

在这种情况下，您可以使用 .find()，例如：

$(this).find(':checkbox');
//equiavlent to $('#search :checkbox')

还有许多其他类似的树遍历方法。

你也可以这样做： $(':checkbox', this) 但这实际上只是由 jQuery 在幕后转换为上面的内容，所以在我看来最好自己做。

Answer 2

使用 .find()。

另一方面，没有理由在 $('#search') 上使用 .each() 因为该选择器只会返回 1 个元素，因为 HTML 元素 ID 必须是独一无二的。

Answer 3

定义一个变量来包含您的结果集。

var $myVar = $('#search');

然后使用 .add() 方法。

$myVar = $myVar.add($('#search input:checkbox'));
$myVar.click(function(){
    alert('div or checkbox clicked');
});

Answer 4

您可以使用

$(":checkbox", $(this));

第二个参数是搜索与选择器匹配的元素的上下文。

所以

$(":checkbox", $(this)).click(function(){
    alert('checkbox clicked');
});

Answer 5

使用你的parent()和children()方法。您可以将选择器指定为参数。

$(this).children(':checkbox');