Question

我正在尝试隐藏这组行中的某些<div class="form-group">行。我想隐藏布尔值1和布尔值3。我可以在子记录格式字段上应用display: none;来隐藏某些行吗？

<div class="subrecord-form-fields">
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_1_" contextual="resource">Boolean 1</label><div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_1_" type="checkbox" name="resource[user_defined][boolean_1]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div></div>
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_2_" contextual="resource">Boolean 2</label><div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_2_" type="checkbox" name="resource[user_defined][boolean_2]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div></div>
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_3_" contextual="resource">Boolean 3</label><div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_3_" type="checkbox" name="resource[user_defined][boolean_3]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div></div>
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__integer_1_" contextual="resource">Integer 1</label><div class="col-sm-9"><input id="resource_user_defined__integer_1_" type="text" value="" name="resource[user_defined][integer_1]" class="form-control"></div></div>

更新：对不起，应该提到我不是100％确定此列表永远不会改变，所以我希望能够按名称选择行，而不仅仅是第二行。

Answer 1

这将隐藏所有for属性以__boolean_3_或__boolean_1_结尾的标签，以及所有ID以那些字符串结尾的元素（对于以随机顺序生成它们的情况很有用）

[for$="__boolean_3_"],
[for$="__boolean_1_"],
[id$="__boolean_3_"],
[id$="__boolean_1_"] {
  display: none;
}

[for$="__boolean_3_"],
[for$="__boolean_1_"],
[id$="__boolean_3_"],
[id$="__boolean_1_"] {
  display: none;
}

<div class="subrecord-form-fields">
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_1_" contextual="resource">Boolean 1</label>
    <div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_1_" type="checkbox" name="resource[user_defined][boolean_1]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_2_" contextual="resource">Boolean 2</label>
    <div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_2_" type="checkbox" name="resource[user_defined][boolean_2]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_3_" contextual="resource">Boolean 3</label>
    <div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_3_" type="checkbox" name="resource[user_defined][boolean_3]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__integer_1_" contextual="resource">Integer 1</label>
    <div class="col-sm-9"><input id="resource_user_defined__integer_1_" type="text" value="" name="resource[user_defined][integer_1]" class="form-control"></div>
  </div>

很显然，如果您知道他们的订单，:nth-child()就非常方便。
如果您想更具体（为避免误报，可以在.subrecord-form-fields之前加上前缀或应用标签（例如：label[for$="__boolean_3_"]等）。

但是实际上，JS是到达此处的正确方法。如果您想找点乐子，请查看CSS selectors, modifiers and combinators的完整列表。

Answer 2

例如，要隐藏第二个div，请使用以下命令：

.subrecord-form-fields :nth-child(2)
{
    display: none;
}

Answer 3

是的！使用伪类:nth-child，您可以执行以下操作：

.subrecord-form-fields div:nth-child(1), .subrecord-form-fields div:nth-child(3)
{
    display: none;
}

我为您制作了一段代码，说明它的外观，现在您需要随便玩一些js来隐藏或显示。

.subrecord-form-fields div:nth-child(1), .subrecord-form-fields div:nth-child(3)
{
    display: none;
}

<div class="subrecord-form-fields">
  <div class="form-group">
   <label class="col-sm-2 control-label" for="resource_user_defined__boolean_1_" contextual="resource">
    Boolean 1
   </label>
  <div class="col-sm-1 checkbox">
  <input id="resource_user_defined__boolean_1_" type="checkbox" name="resource[user_defined][boolean_1]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="resource_user_defined__boolean_2_" contextual="resource">
    Boolean 2
   </label>
   <div class="col-sm-1 checkbox">
    <input id="resource_user_defined__boolean_2_" type="checkbox" name="resource[user_defined][boolean_2]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox">
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="resource_user_defined__boolean_3_" contextual="resource">
    Boolean 3
   </label>
  <div class="col-sm-1 checkbox">
   <input id="resource_user_defined__boolean_3_" type="checkbox" name="resource[user_defined][boolean_3]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox">
  </div>
 </div>
 <div class="form-group">
  <label class="col-sm-2 control-label" for="resource_user_defined__integer_1_" contextual="resource">
   Integer 1
  </label> 
 <div class="col-sm-9">
  <input id="resource_user_defined__integer_1_" type="text" value="" name="resource[user_defined][integer_1]" class="form-control">
 </div>
</div>

Answer 4

如果您要插入行，则可以通过执行此操作...

.subrecord-form-fields > :nth-child(2n -1)
{
    display: none;
}

如何申请展示：无；进入div中的课程

4 个答案: