检查是否元素的文本是另一个相同元素的文本

问题描述 投票:0回答:2

我试图做的是,当我点击的文本,如果另一个div有包含在本文褪色一个孩子。但它不工作

$('.rel-head').click(function() {

  if ($('.art-h .head-art'): contains($(this).text())) {
    $(this).parent().fadeIn().siblings().fadeOut();
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
  <div class="head-art">some text</div>
</div>
<div class="art-h">
  <div class="head-art">anoter text</div>
</div>
<div class "related-heads">
  <h1 class="rel-head">some text</h1>
</div>
javascript jquery html css
2个回答
1
投票
  1. 使用选择:contains和CONCAT字符串正确。

$('.rel-head').click(function() {

  if ($('.art-h .head-art:contains('+$(this).text()+')')) {
    $(this).parent().fadeIn().siblings().fadeOut();
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
  <div class="head-art">some text</div>
</div>
<div class="art-h">
  <div class="head-art">anoter text</div>
</div>
<div class "related-heads">
  <h1 class="rel-head">some text</h1>
</div>

0
投票

这不是很有效的,你点击每个指定项目的每一次搜索整个身体。

这是我会怎么做。

let headArtArray = $('.art-h .head-art'); //Assign it to a variable early to reduce searching

$('.rel-head').click(function() {
  let el = $(this);
  let text = el.text();

  for (let i = 0; i < headArtArray.length; i++) {
    
    if (headArtArray[i].innerText.includes(text)) {
      el.parent().fadeIn();
    } else {
      $(headArtArray[i]).fadeOut();
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
  <div class="head-art">some text</div>
</div>
<div class="art-h">
  <div class="head-art">anoter text</div>
</div>
<div class "related-heads">
  <h1 class="rel-head">some text</h1>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.