CODEWITHSUNDEEP
jqueryhtmlcss
user3443160
user3443160

Reputation: 106

Give navigation links data-text attribute that contains link text in it

I am trying to style the navigation links is such a ways which requires a duplicate text of that element so that i can use that duplicated text in :after pseudo selector.

here is the navigation item

<a href="http://localhost/wp/portfolio/">Portfolio</a>

But i want to add an attribute of "data-text" and that attributes value should be "Portfolio" in upper case. Here is an example what i an trying to achieve.

<a href="http://localhost/wp/portfolio/" data-text="Portfolio">Portfolio</a>

Currently my jquery for this problem is

elementtext = $(".main-navigation a").text();
$(".main-navigation a").attr("data-text", elementtext);

what this does is it adds text of all navigation items like so,

<a href="http://localhost/wp/portfolio/" data-text="HomeServicesPortfolioContactBlogShop">Portfolio</a>

I want text in that attribute of only that manu item shown in second code snippet.

Upvotes: 0

Views: 217

Answers (4)

gavgrif
gavgrif

Reputation: 15509

Iterate over each of the a elements - get its text and then apply that text as the data attribute of the a element. I have added a snippet to do the function and then to console.log the data-attribute on the li a click - so that you can see that it has been added.

$(document).ready(function(){
    $(".main-navigation a").each(function(){
      $(this).attr("data-text", $(this).text());
    })
    
     $(".main-navigation a").click(function(){
      var att = $(this).attr("data-text");
       console.log(att);
    })
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-navigation">
  <li><a>Home</a></li>
  <li><a>Portfolio</a></li>
  <li><a>Gallery</a></li>
</ul>

Upvotes: 2

Ghanshyam Singh
Ghanshyam Singh

Reputation: 1381

Use class for muliple elements like this :-

<a href="http://localhost/wp/portfolio/" data-text="Portfolio" class="dataText">Portfolio</a>

And some Jquery 

$(function(){
     $(".dataText").click(function(){
          var elementtext = $(this).text();
          $(this).attr("data-text",elementtext);
     })
})

Upvotes: 0

KAD
KAD

Reputation: 11112

Group your navigation elements by assigning a class to each one, then loop through them using .each and set the text to uppercase using toUpperCase:

$(document).ready(function(){
    $('.mainNav').each(function(){
      $(this).attr('data-text',$(this).text().toUpperCase());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://localhost/wp/portfolio/" class="mainNav">Home</a>
<a href="http://localhost/wp/portfolio/" class="mainNav">About</a>
<a href="http://localhost/wp/portfolio/" class="mainNav">Portfolio</a>

Upvotes: 2

AG_
AG_

Reputation: 2699

below is a snippet having updated code.

 $(document).ready(function () {
   $(".main-navigation a").each(function(){
   $(this).attr("data-text", $(this).text());
 });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-navigation"><a href="http://localhost/wp/portfolio/">Portfolio</a>
<a href="http://localhost/wp/portfolio/">Portfolio</a>
<a href="http://localhost/wp/portfolio/">Portfolio</a>
<a href="http://localhost/wp/portfolio/">Portfolio</a>
  </div>

Upvotes: 1

Related Questions