How to get Href Text from PHP loop in Jquery

Question

I am displaying anchor tag in php loop. Now I am trying to get text of these anchor tags which is coming from PHP loop in Jquery but I am getting the wrong Result. Check the Screen Shots Below...

Anchor Tags

Wrong Result That I am getting

Now when I click on any link Like Baby Food Or Baby Furniture Or any other link then I am getting the text of all Anchor Tags instead of specific anchor tag which is clicked. For Example when I click on Baby Food then I want Just Baby Food to be displayed not all Anchor Tag Text. Please Help me. Below is my code

PHP

<h4>Related Category</h4>

<?php foreach($grouped_with_count as $relatedCat) { ?>

<b> <?php echo $relatedCat['industry']; ?> </b>

<li> <a href="javascript:void(0);" class="GetHref" onclick="RelatedCatLink(); return false;"><?php echo $relatedCat['product_type']; ?> </a> (<?php echo $relatedCat['count'];?>) </li>
<br />
<?php } ?>

Jquery

function RelatedCatLink(){

var href = $('.GetHref').text(); 
console.log(href);

//alert($('.GetHref').attr('href'));

   }

Please help me out. Thanks in advance..

$('.GetHref') selector gets EVERY element with class GetHref. You could change it to var href = $(this).text();. — Sean
– Sean, Commented Apr 1, 2016 at 16:23

Rino Raj · Accepted Answer · 2016-04-01 16:24:23Z

1

Problem in your code

You are using class for selection. There will be multiple <a> with the same class.

Solution

Pass the element along with your function call

HTML

<a href="javascript:void(0);" class="GetHref" onclick="RelatedCatLink(this); return false;"><?php echo $relatedCat['product_type']; ?> </a> (<?php echo $relatedCat['count'];?>) </li>

JS

function RelatedCatLink(elem){
   var href = $(elem).text(); 
}

Working Demo

function RelatedCatLink(elem){
   var href = $(elem).text(); 
   alert(href);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li> <a href="javascript:void(0);" class="GetHref" onclick="RelatedCatLink(this); return false;">1</a> </li>
<li> <a href="javascript:void(0);" class="GetHref" onclick="RelatedCatLink(this); return false;">2</a> </li>
<li> <a href="javascript:void(0);" class="GetHref" onclick="RelatedCatLink(this); return false;">3</a> </li>
<li> <a href="javascript:void(0);" class="GetHref" onclick="RelatedCatLink(this); return false;">4</a> </li>

edited Apr 1, 2016 at 16:24

answered Apr 1, 2016 at 16:17

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

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

1 Comment

Rino Raj Over a year ago

@Junaidafzal Always glad to here that :)

Umair Khan · Accepted Answer · 2016-04-01 16:18:14Z

1

//PHP CODE  

      <h4>Related Category</h4>

        <?php foreach($grouped_with_count as $relatedCat) { ?>

        <b> <?php echo $relatedCat['industry']; ?> </b>

        <li> <a href="javascript:void(0);" class="GetHref" onclick="RelatedCatLink(<?php echo $relatedCat['id']; ?>); return false;" id="GetHref-<?php echo $relatedCat['id']; ?>"><?php echo $relatedCat['product_type']; ?> </a> (<?php echo $relatedCat['count'];?>) </li>
        <br />
        <?php } ?>



//JQUERY CODE    

    function RelatedCatLink(id){

    var href = $('#GetHref-'+id).text(); 
    console.log(href);

       }

answered Apr 1, 2016 at 16:18

Umair Khan

2833 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to get Href Text from PHP loop in Jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related