隐藏div如果在有类的有序列表下
我试图隐藏一个div，显示评论信息，如果评论是一个子。
在下面的代码中，我试图做到这样，如果"ol"有类“子”，那么包含id "info"的div将被隐藏。
如果注释是子的，也可以使用其他隐藏div的方法。
<ol class="children">
<li class="comment byuser comment-author-1 bypostauthor odd alt depth-2" id="comment-325" itemprop="review" itemscope itemtype="http://schema.org/Review">
<article id="comment-325" class="comment row">
<header class="comment-author vcard col-md-2 col-sm-3 col-xs-12">
<section class="comment-content comment col-md-10 col-sm-9 col-xs-12">
<div class="comment-meta"></div>
<div itemprop="reviewBody">
<div class='edit-comment-admin-links-no-icon ' id='edit-comment-user-link-325' style='background:none'>
<div style='display:none'>
<p>asdsadasdsadasasdasdas
<div id="info" class="cio-display cio-display-0">
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-service-provided">Service Inquired About:</div>
<div class="cio-field cio-field-service-provided">Buy/Sell Commercial</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-deal-completed">Deal Completed?</div>
<div class="cio-field cio-field-deal-completed">Yes</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-date-of-service">Date Of Service:</div>
<div class="cio-field cio-field-date-of-service">2015</div>
</div>
</div>
</div>
</div>
</section>
</header>
</article>
</li>
</ol>回答 3
Stack Overflow用户
发布于 2015-12-24 00:44:08
试试$('ol.children #info').hide();
Stack Overflow用户
发布于 2015-12-24 00:46:14
考虑到您发布的代码，这是您需要的CSS代码：
ol.children #info {
display: none;
}但是，假设您有不止一个这样的评论，我必须添加以下说明：
将相同的
id传递给页面中的多个元素并不是一个好主意。Id应该是HTML元素的唯一标识符。您应该使用class来实现您的目的。
现在，假设您的to-be-hidden元素总是包装在带有itemprop="reviewBody"的元素中，那么您应该使用以下方法将它们隐藏在有类children的有序注释列表中：
ol.children [itemprop="reviewBody"] {
display: none;
}下面是您代码的“清理”版本：
<ol class="children">
<li class="comment byuser comment-author-1 bypostauthor odd alt depth-2" id="comment-325" itemprop="review" itemscope itemtype="http://schema.org/Review">
<article id="comment-325" class="comment row">
<header class="comment-author vcard col-md-2 col-sm-3 col-xs-12">
<section class="comment-content comment col-md-10 col-sm-9 col-xs-12">
<div class="comment-meta"></div>
<div itemprop="reviewBody">
<div class='edit-comment-admin-links-no-icon ' id='edit-comment-user-link-325' style='background:none'>
<div class="cio-display cio-display-0">
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-service-provided">Service Inquired About:</div>
<div class="cio-field cio-field-service-provided">Buy/Sell Commercial</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-deal-completed">Deal Completed?</div>
<div class="cio-field cio-field-deal-completed">Yes</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-date-of-service">Date Of Service:</div>
<div class="cio-field cio-field-date-of-service">2015</div>
</div>
</div>
</div>
</section>
</header>
</article>
</li>
</ol>
请注意，如果列表中包含类children，则上述代码将隐藏列表中所有注释的评审主体部分，包括顶级注释。如果一个有序列表甚至有一个子列表，那么它很可能会被WordPress添加到类WordPress中。
如果您只想隐藏第2级注释(或更高级别)上的评审主体部分，但在第1级注释中保持它们的可见性，并且假设这些级别1注释具有添加的level-1类(我猜，因为您没有向我们显示1级注释)，那么应该使用以下CSS：
ol.children>li:not(.level-1) [itemprop="reviewBody"] {
display: none;
}Stack Overflow用户
发布于 2015-12-24 01:35:27
从凯尔·艾曼纽尔的答案出发，试着使用这个jQuery选择器
$('ol.children div[id="info"]').hide();使用divid=" info“选择器，如果您正在寻找具有id的信息的div。#info选择器将只返回带有info作为ID的第一个DOM元素，这应该是可以的，因为您应该只向元素发送唯一的ID。
https://stackoverflow.com/questions/34445772
复制相似问题
腾讯云开发者
