Скачать или смотреть How to Use jQuery to Find Text after a Strong Tag in a Grandparent Element

In this guide, we explain how to use jQuery to efficiently find specific text related to an HTML structure, allowing you to extract the desired value upon user interaction.
---
This video is based on the question https://stackoverflow.com/q/63191518/ asked by the user 'Pravin Mishra' ( https://stackoverflow.com/u/12915279/ ) and on the answer https://stackoverflow.com/a/63191618/ provided by the user 'Rory McCrossan' ( https://stackoverflow.com/u/519413/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Jquery find text after text which is present in strong tag inside grandparent

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Use jQuery to Find Text after a Strong Tag in a Grandparent Element

In web development, especially when manipulating the Document Object Model (DOM) with JavaScript, you may encounter various challenges. One common task is to locate specific text within a deeply nested HTML structure, especially after clicking a specific element. In this post, we will address a specific scenario: finding the product code using jQuery when a user clicks on a designated delete button.

The Problem

Imagine a scenario where you have the following HTML structure:

[[See Video to Reveal this Text or Code Snippet]]

The requirement here is to find the 'L00335.06' product code (which is wrapped within the <span> tag) only when the user clicks on the delete button, but specifically in relation to the 'Product code:' label.

Breaking Down the Solution

To achieve this, let's create an efficient jQuery script. Here’s how to break down the steps systematically:

Step 1: Bind an Event Handler

First, we need to bind a click event to the delete button. This ensures that our code executes when the user interacts with the button, rather than just loading the DOM.

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Traverse the DOM

Next, we will utilize the closest() method to navigate to the parent element that contains the js-delete-item. This allows us to search upward in the DOM tree without needing repetitive prev() calls, making code more robust to potential changes in the HTML structure.

Step 3: Find the Target Text

Now, we can locate the product code related to the 'Product code:' label. We will employ a combination of find() and contains() to extract the information precisely, ensuring that we only grab the value when it's associated with the correct label.

Here is the final combined jQuery script:

[[See Video to Reveal this Text or Code Snippet]]

Complete Code Example

For your convenience, here's the complete code with both HTML and jQuery integrated:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following the steps outlined in this guide, you should now be able to find text associated with specific tags in a structured HTML layout using jQuery. This method not only simplifies your code but also improves its adaptability to changes in the HTML structure. Happy coding!