checking if element's text is same as another element's text

Question

I'm trying to do is when I click on a text, if another div has a child that contains this text fade in. but it's not working

$('.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>

Need the html as well. Also you have :contains not .contains — basic
– basic, Commented Feb 5, 2019 at 23:31
for :contains use $('.art-h .head-art:contains($(this).text()')) — guradio
– guradio, Commented Feb 5, 2019 at 23:39
if($('.art-h .head-art').text() == $(this).text()) { ... } — user1189882
– user1189882, Commented Feb 5, 2019 at 23:53
<div class="art-h"> <div class="head-art">some text</div> </div> <h1 class="rel-head">some text</h1> @basic — Ibrahim Yousry
– Ibrahim Yousry, Commented Feb 5, 2019 at 23:57
@mark.hch but how to select this one $('.art-h .head-art') if there is more than one have the same class? — Ibrahim Yousry
– Ibrahim Yousry, Commented Feb 5, 2019 at 23:59

guradio · Accepted Answer · 2019-02-06 00:11:55Z

1

Use selector :contains and concat the string properly.

$('.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>

answered Feb 6, 2019 at 0:11

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Keno · Accepted Answer · 2019-02-06 00:55:50Z

0

It's not very efficient to search the entire body every time you click on each of the specified items.

This is what I'd do.

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>

edited Feb 6, 2019 at 0:55

answered Feb 6, 2019 at 0:14

Keno

2,0881 gold badge17 silver badges27 bronze badges

8 Comments

Ibrahim Yousry Over a year ago

it's not working and the console is giving me an error in this line if (headArtArray[i].text().includes(text)) {

Keno Over a year ago

@IbrahimYousry I'll fix that

Keno Over a year ago

@IbrahimYousry Fixed, just changed text() to innerText.

Ibrahim Yousry Over a year ago

if($('.art-h .head-art').text() == $(this).text()) { ... } if it like this will it work, and if it will how can I select this specific $('.art-h .head-art')

Keno Over a year ago

The code snippet posted above does work as expected. Double check what you have to ensure it is consistent.

|

Collectives™ on Stack Overflow

checking if element's text is same as another element's text

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related