What is the best way to acquire the href value from this source?

Question

What is the best way to acquire the href value from this source?

Looking to extract the dynamic value "3 Sent" from the html snippet provided. How can this be achieved?

    <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: My apologies for any confusion, let me clarify my query.

The string "3 Sent" is volatile and subject to change, ranging from "1 Sent" to "2 Sent" and beyond. It is also a hyperlink that I wish to click on.

Thank you in advance.

javascript selenium selenium-webdriver

Answer 1

Answer №1

It is achievable through text-based search using xpath. It seems like you are in need of a selector.

//a[.='3 Sent']

Update:

You can also utilize a CSS selector like this:

a[href='#sent']

Answer 2

It is achievable through text-based search using xpath. It seems like you are in need of a selector.

//a[.='3 Sent']

Update:

You can also utilize a CSS selector like this:

a[href='#sent']

Answer 3

Answer №2

Give this a shot
When the anchor element is clicked, it triggers a search for the specified text

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

Answer 4

Give this a shot
When the anchor element is clicked, it triggers a search for the specified text

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

Answer 5

Answer №3

To retrieve the information, you can use the following code snippet:

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

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


   });
});

Check out this JSFiddle link for reference

Answer 6

To retrieve the information, you can use the following code snippet:

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

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


   });
});

Check out this JSFiddle link for reference

Answer 7

Answer №4

Extract the text inside the anchor tag of the next list element with the class .active.

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>

Locate the second list element inside the parent element with the class .some-tabs and retrieve the text inside its anchor tag.

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>

Find the anchor tag with href='#sent' and display the text it contains.

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>

Answer 8

Extract the text inside the anchor tag of the next list element with the class .active.

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>

Locate the second list element inside the parent element with the class .some-tabs and retrieve the text inside its anchor tag.

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>

Find the anchor tag with href='#sent' and display the text it contains.

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>

What is the best way to acquire the href value from this source?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A Multilingual Application developed using either AngularJS or the Ionic Framework

Is it possible to save an entire webpage that infinitely scrolls without actually manually scrolling through it?

Can an action be activated when the mouse comes to a halt?

Divide a collection of objects into groups based on 2-hour time spans

An easy guide to sorting outcomes using JSON

Tracking global click events in Vue.js can provide valuable insights into user interactions on your

Encountering an NPM error while attempting to initiate a new React application

Creating a series of image files from CSS and Javascript animations using Selenium in Python

What is the best method for updating inner html with AJAX using the results obtained from json_encode?

The JavaScript function exclusively reveals the final element, which is Three.js

Display or conceal certain HTML form elements based on the selection made in the previous form element

Obtaining Relative Values within Every Iteration using jQuery

receiving a null value from a dropdown selection in react native

Using AngularJS with the Phonegap Facebook plugin

Concealing a Column within a Hierarchical HTML Table

Managing the uploading of files when a new property is included directly from the JavaScript File Object

The application runs smoothly during development, but encounters issues once deployed on Heroku

Rendering JSON data in a dropdown menu

The CSS selector used in Selenium IDE may vary from the one copied directly from the browser's development tools

Converting JavaScript objects into a JSON string and then into a PHP array via POST