一个元素的所有后代的 jQuery 选择器答案

【问题标题】：jQuery Selector for all descendants of a element一个元素的所有后代的 jQuery 选择器
【发布时间】：2014-03-08 19:06:50
【问题描述】：

我有一个<div id="rptViewer">，它有多个 div 和表格，而它又可以有多个 div 和表格。我需要一个 jQuery 选择器来直接或间接（嵌套）选择“rptViewer”下的所有 div 或表。

我正在尝试以下 jQuery 选择器。

<script type="text/javascript">
    $(document).ready(function() {
        $("[id*='rptViewer'] table").each(function(i, item) {
             $(item).css('display', 'inline-block');
            });
            $("[id*='rptViewer'] div").each(function(i, item) {
                $(item).css('display', 'inline-block');
            });            

            $("[id*=rptViewer] table").attr("width","");
        });
    </script>

但是当我使用 firebug 检查它时，我发现只有 'rptViewer' 的直接子级获得了 'inline-block' CSS

【问题讨论】：

[id*='rptViewer'] div 应该可以工作。看到这个小提琴并检查输出（3个div元素）：jsfiddle.net/NYmpv
在我制作的演示中运行良好jsfiddle.net/v8tnR
你能给我们HTML吗？如果可能，请使用 jsfiddle.net 来显示您的问题，这样会更容易帮助您；）
你为什么不简单地使用 $("[id*='rptViewer'] table,[id*='rptViewer'] div").css('display', 'inline-block ');?

标签： jquery css jquery-selectors

【解决方案1】：

如果您想在 rptViewer 中包含所有表格和 div 的类。你可以这样做：

$("table, div", "#rptViewer").addClass('someStyle');

但是，如果您只想为 rptViewer 的真正子级包含一个类。你可以这样做：

$("#rptViewer > table, #rptViewer > div").addClass('someStyle');

【讨论】：

在这两种情况下都不需要使用 jQuery 的 each 方法。只需在任一选择器上直接调用 addClass。
虽然这个公认的答案对于所描述的问题可能是正确的，但问题的标题是不同的：“一个元素的所有后代的 jQuery 选择器”。现在的答案是只使用通配符星号选择器 $('element *')。

【解决方案2】：

不要在 JavaScript 中添加样式，而是通过 CSS 添加样式：

#rptViewer div,
#rptViewer table {
  display: inline-block;
}

您可以使用[id] 选择器和逗号分隔的选择列表：

$('#rptViewer div, #rptViewer table')...

如果您要选择更多元素，您可能需要使用.find()：

$('#rptViewer').find('div, table')...

鉴于您使用rptViewer 作为[id]，我假设您使用的是 ASP.NET，在这种情况下您应该向元素添加一个类以简化选择：

$('.viewer').find('div, table')...

【讨论】：