Question

这是我的问题fiddle。

当某些文字出现时，我试图隐藏整个div。如何使用Javascript或Jquery执行此操作？

我已经尝试过ff：

$containers = document.querySelectorAll("div.row.word-style.table-border");

for ($container of $containers) {
  if ($container.innerText.includes('Internal Request')) {
    $container.style.display = "none";
  }
}

但是如果它是第一个，它只会隐藏div。我的小提琴上有多个div。

请问有人可以帮忙吗？

Answer 1

includes在IE中不起作用。您可以使用。

 <script>

$(document).ready(function() {
//It will hide the parent which child contain only Closed not Closed Case
$(".col-md-1").filter(function() {
    return $(this).text() === "Closed";
}).parent().hide();


});

</script>

Div元素：

<div class="row word-style table-border">
  <div class="col-md-1">Tech assistance Internal Request</div>
  <div class="col-md-1">Closed Case</div>
  <div class="col-md-1">Normal</div>
  <div class="col-md-1">New</div>
</div>

<div class="row word-style table-border">
  <div class="col-md-1">Tech assistance</div>
  <div class="col-md-1">Closed</div>
  <div class="col-md-1">Normal</div>
  <div class="col-md-1">New</div>
</div>

Answer 2

使用jQuery很简单，只需使用父选择器即可：

preg_match('/<!DOCTYPE html>(.*?)<div class="match-hidden">(.*?)<\/div>/s',$file,$newfile);

Answer 3

使用循环并使用如下所示的indexOf检查字符串是否存在。

$('.table-border div').each(function(index, element) {
  if ($(this).text().indexOf("Internal Request") >= 0) {
    $(this).parent().hide();
  }
});

.table-border {
  border-bottom: 1px solid #c9cacc;
  padding-bottom: 20px;
  padding-top: 20px;
  height: 73px;
}

.word-style {
  font-family: Roboto-Light;
  font-size: 15px;
  color: #6d6e71;
  letter-spacing: 0.5px;
  line-height: 15px;
  text-align: center;
}

.col-md-1 {
  width: 8.33333333%;
}

.col-md-3 {
  width: 25%;
}

.col-md-2 {
  width: 16.66666667%;
}

.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
  float: left;
}

div {
  width: 1200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row word-style table-border">
  <div class="col-md-1">Tech assistance Internal Request</div>
  <div class="col-md-1">PARTS </div>
  <div class="col-md-1">Normal</div>
  <div class="col-md-1">New</div>
</div>

<div class="row word-style table-border">
  <div class="col-md-1">Tech assistance</div>
  <div class="col-md-1">IOT </div>
  <div class="col-md-1">Normal</div>
  <div class="col-md-1">New</div>
</div>

当子div包含特定文本时，如何隐藏父div？

3 个答案: