ratsstack
ratsstack

Reputation: 1021

How can I get this href value?

I would like to get the value "3 Sent" from the hmtl below. How can I do this?

    <ul class="nav nav-tabs some-tabs">
        <li class="active">
            <a href="#accepted" data-toggle="tab">1 Accepted</a>
        </li>
        <li class="">
            <a href="#sent" data-toggle="tab">3 Sent</a>
        </li>
    </ul>

EDIT: Apologies everyone, I wasn't clear on what I was after.

The value "3 Sent" changes all the time, can be "1 Sent, 2 Sent" etc. It is a clickable link so I want to be able to click on it.,

Thanks.

Upvotes: 0

Views: 186

Answers (4)

Saifur
Saifur

Reputation: 16201

Possible with xpath text based search. I believe you are looking for a selector

//a[.='3 Sent']

Edit

Just simply use css selector then,

a[href='#sent']

Upvotes: 2

iamsuman
iamsuman

Reputation: 1413

Try this
The anchor tag when gets clicked it search for the text

$('.nav li a').on('click', function(e){
    e.preventDefault();
    console.log("Value is " + $(this).text());
});

Upvotes: 1

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

From the class .active in the next list element get the text in anchor.

var textInAnchor = document.querySelector(".active + li a").innerHTML;

alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
  <li class="active">
    <a href="#accepted" data-toggle="tab">1 Accepted</a>
  </li>
  <li class="">
    <a href="#sent" data-toggle="tab">3 Sent</a>
  </li>
</ul>

from the class .some-tabs find the child list element in the second position then return his anchor text

var textInAnchor = document.querySelector(".some-tabs > li:nth-child(2) a").innerHTML;

alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
  <li class="active">
    <a href="#accepted" data-toggle="tab">1 Accepted</a>
  </li>
  <li class="">
    <a href="#sent" data-toggle="tab">3 Sent</a>
  </li>
</ul>

Get the href with value = #sent the return the text

var textInAnchor = document.querySelector("[href='#sent']").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
  <li class="active">
    <a href="#accepted" data-toggle="tab">1 Accepted</a>
  </li>
  <li class="">
    <a href="#sent" data-toggle="tab">3 Sent</a>
  </li>
</ul>

Upvotes: 0

Butani Vijay
Butani Vijay

Reputation: 4239

You can simply get it using below code:

$(document).ready(function(){
   $('li').find('a').each(function() {

       if($(this).attr('href')=="#sent")
       {
           alert($(this).text());
       }


   });
});

Here is JSFiddle

Upvotes: 0

Related Questions