隐藏与 Jquery 没有类的特定 Div答案

【问题标题】：Hide a specific Div which have no class with Jquery隐藏与 Jquery 没有类的特定 Div
【发布时间】：2018-03-16 19:29:48
【问题描述】：

我想隐藏 特定 div（示例 2），但它没有类或 id，因此我无法在该特定 div 上应用 jquery（示例 2）...请指导我如何可以用jquery隐藏那个div。

这是我的 div 结构：

<div class="purhist-desc-col">
  <h5>Heading Sample</h5>
  <div class="purchase-price"></div>
  <div>Example 1</div>
  <div class="booking-hide-on-wholeday">00:00 Check-out 00:00</div>
  <div>Example 2</div>
  <div>Example 3</div>
</div>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果我们可以使用 CSS 轻松实现，为什么要使用 jQuery：

.purhist-desc-col>div:nth-child(5) {
  display: none;
}
/* OR
booking-hide-on-wholeday + div {
  display: none;
}
*/

<div class="purhist-desc-col">
  <h5>Heading Sample</h5>
  <div class="purchase-price"></div>
  <div>Example 1</div>
  <div class="booking-hide-on-wholeday">00:00 Check-out 00:00</div>
  <div>Example 2</div>
  <div>Example 3</div>
</div>

【讨论】：

如果 example 是主 div 的倒数第二个孩子....我怎么能用 css 做到这一点？
@ma123456 我添加了更多示例；）您可以使用 nth-child
非常感谢...你节省了我的时间

【解决方案2】：

您可以使用 DOM 关系并使用其兄弟元素定位所需的元素。

$('.booking-hide-on-wholeday').next().hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="purhist-desc-col">
  <h5>Heading Sample</h5>
  <div class="purchase-price"></div>
  <div>Example 1</div>
  <div class="booking-hide-on-wholeday">00:00 Check-out 00:00</div>
  <div>Example 2</div>
</div>

【讨论】：

不需要使用.next - 你可以像这样在jquery选择器中使用CSS next-sibling selector：$('.booking-hide-on-wholeday + div')

【解决方案3】：

您可以通过+（下一个）选择器来实现。

$(document).ready(function(e) {
      $('.booking-hide-on-wholeday + div').hide();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="purhist-desc-col">
<h5>Heading Sample</h5>
<div class="purchase-price"></div>
<div>Example 1</div>
<div class="booking-hide-on-wholeday">00:00 Check-out 00:00</div>
<div>Example 2</div>
</div>

【讨论】：

这是做什么的？它如何回答这个问题？不要只是脱口而出代码。解释你自己！ stackoverflow.com/help/how-to-answer

【解决方案4】：

您可以使用 .purhist-desc-col div:last-of-type 选择该 div，因为您需要定位该容器内的最后一个 div，以便 jQuery 代码为

$('.purhist-desc-col div:last-of-type').hide()

在 vanillaJS

document.querySelector('.purhist-desc-col div:last-of-type').style.display = 'none'

【讨论】：

【解决方案5】：

为此，您必须为其编写一个线性 jquery 代码。

$('div.booking-hide-on-wholeday').next('div').hide();

这将解决您的问题。

谢谢

【讨论】：