Retrieve the text content from the closest parent <a> tag

Currently, I am utilizing Ruby and Nokogiri to extract information from an HTML page:

<div><a href="#" title="firstTitle">text one</a></div>

  <p class="OK">some content</p>
  <p class="OK">some content</p>

<div><a href="#" title="secondTitle">text two</a></div>

  <p class="WARNING">some content</p>
  <p class="WARNING">some content</p>

<div><a href="#" title="thirdTitle">text three</a></div>

  <p class="CRITICAL">some content</p>
  <p class="CRITICAL">some content</p>

If I aim to locate paragraphs with a class of WARNING, the following code snippet achieves that successfully:

doc = Nokogiri::HTML(html)
warning = doc.css('p.WARNING')

My current challenge is targeting the text within the nearest parent a tag. To clarify, in this instance, it should return text two.

I have experimented with methods like .first.parent.name and previous_element but have faced obstacles. Any suggestions would be greatly appreciated. Thank you!

Answer №1

To locate a particular sibling element before the current element, you can utilize the XPath preceding-siblng axis. For instance, if the current element is <p>, you could experiment with something similar to the code snippet below in order to identify the closest preceding div sibling and retrieve the associated a element:

link = warning.at_xpath('./preceding-siblng::div[1]/a')

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Global setting of font size ratio in Material UI library

After reviewing the guidance provided in Material's documentation and this helpful response, I have been attempting to establish a default font-size for the html tag in my application. This adjustment is necessary because my app utilizes REM units, wh ...

Obtain the numerical value associated with a specific label in an HTML document

Currently, I am utilizing PHP to extract a specific number from an email by parsing its content. As an illustration, my aim is to retrieve the number 033 from a text like this: Account Number: 033 Account Information: Some text here In reality, the in ...

The received data is not displayed by ngx-gauge

Currently, I am working on a project that involves displaying real-time data from a server. During the testing phase using MQTT client WebSocket tools like HiveMQ, I encountered an issue. While I can see the value of the data in the Chrome console, I' ...

Is it possible for me to link to a local constant file using an href attribute within a link tag?

I am trying to use an SVG icon as the icon for the browser title bar. const svgIcon = <svg class="svg-icon" viewBox="0 0 20 20"> <path "something"></path> </svg> and then I have a link tag that ...

Aligning adaptable content using css

Currently, I am facing a challenge in centering an (inline?) element horizontally within my container div. My goal is to have "some text" with a background that retracts to it, and to achieve this while keeping everything centered within the containing ele ...

The HTML image and additional elements adjust their size based on the width of the page

I am currently working on developing an HTML5, CSS3, and JavaScript based game. I really want everything in the game to be resizable, including text, fonts, and images, adjusting according to the width and height of the screen. For text and font, I have di ...

I'm having trouble reaching the website at http://localhost:8000/accounts/profile

I seem to be having trouble accessing http://localhost:8000/accounts/profile. Every time I try to visit this URL, it redirects me to http://localhost:8000/accounts/login/?next=/accounts/profile/. I have checked my code in urls.py but can't figure out ...

The menu items are rendered inaccessible due to the Bootstrap theme

I recently designed a sleek theme using bootstrap. After downloading and customizing it, I encountered an issue where clicking on a menu item in the main menu does not trigger any response. Any thoughts on what could be causing this malfunction? Check ou ...

Resolve Bootstrap 4 responsive table header alignment glitch

Utilizing the d-none and d-md-block classes on a responsive table to hide certain columns at smaller screen sizes has been successful overall. However, there is one issue - the hidden columns seem to be slightly misaligned with the rest of the table. Despi ...

What is the best way to incorporate Ajax into a Rails application?

Check out the Webpage Design I am currently working on a Todo List that includes various Todo Items. Each incomplete task has a button called "Mark Item as Done" next to it, which triggers the button_to method when clicked. I am facing challenges in imple ...

Datetimepicker initialization with default start date

I need to disable all dates for the specific date stored in a session. My attempt: The session contains the following date format: dd-mm-yyyy $_SESSION['beschikbaar']; This is the input field <input class="form-control" type="text" place ...

HTML and CSS - Overcoming Challenges with Vertically Centering Content

Having trouble with aligning code within floated divs? In my left div, a span and image are stuck at the bottom left, while in the right one, text is fixed to the top-right. Check out how it looks currently. If you can provide some guidance on fixing thi ...

I'm having trouble with emailjs in HTML. Why am I not receiving any emails from emailjs? And how can I successfully send emails using emailjs

How can I successfully send emails using emailjs in an HTML project? Previously, I had no issues sending emails with emailjs in Reactjs, but now in my HTML CSS JavaScript project, it doesn't seem to be working. Could someone assist me with implementin ...

Do we need to utilize Xpath while automating Sitecore testing with Webdriver?

As I work on developing an automated testing framework for Sitecore, I have been relying heavily on Xpath to locate elements since Sitecore generates dynamic IDs each time the page loads. This approach can become quite tedious over time. Are there any alte ...

HTML drag-and-drop setDragImage fails to show ghost image on initial drag operation

Currently, I am working on developing a drag and drop menu feature that allows users to drag an image thumbnail from one div to a canvas element. The main issue I am facing is that the source div uses a sprite for displaying its background thumbnail. As a ...

Develop a radio button filter utilizing the "Date of Creation" attribute, implemented with either jquery or JavaScript

I am currently utilizing a customized Content Query Web Part to load a series of list items. Each of these items has an XSLT attribute known as the Created Date. Shown below is an example of the markup: <div class="item" createddate="2014-01-22 13:02 ...

Text superimposed on an image

Hey everyone, so I'm currently working on building my very first website and I decided to start off using a template that I found online. The layout of the pages consists of 2 columns with div tags - one for text on the left side and the other for ima ...

Switching between different alert classes in Bootstrap 4 can cause the alert type to malfunction

I am in the process of developing an alert system for a web application using Bootstrap 4. Below is the code I have implemented: function bsalert(str1, str2) { $(".alert").addClass('show'); $(".alert").addClass('alert-'+str ...

Creating a dynamic dropdown menu in HTML

I am creating a website for my school project and needed a dynamic dropdown feature. I followed a tutorial to implement it, which can be found here. After completing the first 6 parts successfully, I encountered an issue in the last part where the dropdow ...

Adjust the text positioning to be lower without affecting the placement of the image

Hey experts: I'm experimenting with something, but can't quite grasp the concept... My main Div contains a paragraph of text and an image (each nested in their own Divs) at the top of the HTML page. The image is styled to float right while stylin ...