CODEWITHSUNDEEP
javascriptjqueryhtmlcss
POPEYE1716
POPEYE1716

Reputation: 79

Comparing Variable value to an element value

Hello I'm looking to compare a variable value to an element value and if they match apply this style

Say I have this: 

  // Removed$('#section7').click(function() {
    $("a[href$='section7']").click(function() { 
        //alert("Test");

        $('publishing').clone().appendTo('#publishing-version');
        $('#publishing-version publishing').contents().unwrap();

        var pubVer = $('#publishing-version').text();

        $("edition-holder a:contains('" + pubVer + "')").css('background-color', 'pink');
        console.log(pubVer);


    }); //end click func for publishing

And I want to compare to a value from the href in "edition-holder" in HTML code below to the variable pubVer and if they match apply a border style to the corresponding a href link.

I've updated the code since, but I tried the code example posted below but still wasn't able to succeed. Even tried moving the code below into a new file on it's own with no luck

I've tried to use contains selector but I couldn't get the style to show. Is there a way in jQuery to match strings and if they are equal do this?

So if the user clicks on the id section7 then run this script.

I see the code working below in Barmar response, but failed to get it to work on my end.

HTML Code Higher up in the page

`**<div id="publishing-version"></div>**` //Places ver from below into this element

<publishing>Vol. 20 | May 2017</publishing>//Changes depending on article issue

    <section class="animated slideInRight" style="" id="section7">
    <div class="section-heading">
      <section-subhead>Want to read previous editions?</section-subhead>

      </div>
      <div class="row-container">
      <edition-container>
        <edition-sub>Please choose the desired one</edition-sub>

        <edition-holder><a href="/c-conv-content/may/index.html?requestid=cunastuWugufr3dr" class="edition-link">Vol. 20 | May 2017</a>
<a href="/c-conv-content/apr/index.html?requestid=sP2kufuvabu4E4Ey" class="edition-link">Vol. 19 | April 2017</a>
<a href="/c-conv-content/mar/index.html?requestid=s1oex54phlenlaXl" class="edition-link">Vol. 18 | March 2017</a>
<a href="/c-conv-content/feb/index.html?requestId=Niewlazl8yieProU" class="edition-link">Vol. 17 | February 2017</a>
<a href="/c-conv-content/index.html?requestid=dcURzXhdavLss597" class="edition-link">Vol. 16 | January 2017</a>
       </edition-holder>
      </edition-container>
      </div>

     <home class="home"><a href="#main-section"><img src="images/home.png">Back to Home Section</a></home>
    </section>

Upvotes: 0

Views: 553

Answers (1)

Barmar
Barmar

Reputation: 780843

You can use :contains. You have to concatenate the variable with the rest of the selector.

The version you want isn't in $("#publishing-version"), it's in $("publishing").

var pubVer = $('publishing').text().trim();
$("edition-holder a:contains('" + pubVer + "')").css('background-color', 'pink');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Publishing version:
<publishing>Vol. 20 | May 2017</publishing>
<div class="row-container">
  <edition-container>
    <edition-sub>Please choose the desired one</edition-sub>

    <edition-holder>
      <a href="/c-conv-content/may/index.html?requestid=cunastuWugufr3dr" class="edition-link">Vol. 20 | May 2017</a>
      <a href="/c-conv-content/apr/index.html?requestid=sP2kufuvabu4E4Ey" class="edition-link">Vol. 19 | April 2017</a>
      <a href="/c-conv-content/mar/index.html?requestid=s1oex54phlenlaXl" class="edition-link">Vol. 18 | March 2017</a>
      <a href="/c-conv-content/feb/index.html?requestId=Niewlazl8yieProU" class="edition-link">Vol. 17 | February 2017</a>
      <a href="/c-conv-content/index.html?requestid=dcURzXhdavLss597" class="edition-link">Vol. 16 | January 2017</a>
    </edition-holder>
  </edition-container>
</div>

Upvotes: 1

Related Questions