What is the best way to locate this specific element?

<div class="ptp-item-container">
    <div class="plan">New Text to Display!</div>
    <div class="price">200</div>
    <div class="bullet-item">some other text</div>
    <div class="cta"> <a class="button" href="javascript:getText()">Go!</a> 
    </div>
</div>

When I clicked the button, I experimented with this code:

function getText(){
  alert($(this).parent().parent().children().text() );
}

Unfortunately, it didn't give the desired outcome and I'm aware that a solution exists using $(this) for this task.

Update: Below is the entire Javascript code:

<script>
   jQuery(document).ready(function($) {  
        $(".ptp-button").attr("href", "javascript:getText()");
  });
        function getText(){
            alert($(this).closest('.ptp-item-container').find('.plan').text());
        }
</script>

Upon inspection, the console displayed an error message "Uncaught TypeError: undefined is not a function VM4092:1(anonymous function)"

Should I pass $(this) as an argument in javascript:getText($(this)) or something similar?

javascriptjqueryhtmlcss

Answer №1

Avoid using the javascript: href to target it. Opt for an .on() handler instead, as this is the appropriate approach for handling a click event in JQuery. This will allow you to reference this:

Furthermore, as mentioned before, rather than navigating through parents, utilize the .closest() function:

$('.ptp-item-container').on('click', '.button', function() {
    alert($(this).closest(".ptp-item-container").find(".plan").text());
});

Answer №2

To retrieve specific elements, consider utilizing both .closest() and .find():

console.log($(this).closest(".product-wrapper").find(".product-name").text());

Make sure to explore the jQuery API documentation for more information.

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

using css to pass arguments

I need help with a code that I have, here's the structure: <div className="site-col-1"> content 1 </div> <div className="site-col-2"> content 2 </div> Here is how the corresponding CSS file looks... .s ...

htmlcssreactjssass

AngularJS expression utilizing unique special character

There are certain special characters (such as '-') in some angular expressions: <tr data-ng-repeat="asset in assets"> <td>{{asset.id}}</td> <td>{{asset.display-name}}</td> <td>{{asset.dns-name}}</td&g ...

javascriptangularjs

Looking for assistance with JQuery and JavaScript?

I oversee a team of employees, each with a 7-day work schedule. To streamline the process, I have developed a PHP form that I would like to use to collect data for verification in JavaScript before submitting it to an SQL database using AJAX. My main cha ...

phpjavascriptjquery

How can I utilize JQuery to dynamically refresh a dropdown menu?

My dropdown list is initially empty: <div> <label>Boarding Point </label> <select title="Select pickup city" id="boardingDropdown"> </select> </div> I am trying to popula ...

javascripthtmljqueryajax

Shade of a row within a PHP table

I have a table that is populated with data from a database. Is there a way for me to dynamically change the color of a row based on certain conditions from a JSON file? For example, if the temperature exceeds a set minimum value, I want to highlight the ro ...

phphtmlcss

Using cascading style sheets to switch a page into editing mode

Is it possible to change the view of a page after clicking a button without using javascript, and instead relying solely on CSS? I want to display a page with information where users can click an edit button and make changes within the same view rather th ...

javascriptjqueryhtmlcss

The regex path matching issue in next.config.js is being caused by the pattern not being able to start with "?"

In my upcoming project, I attempted to utilize regex path matching in the next.config.js file as explained in the documentation. The goal was to match all routes except for one specific route by adding the regex ^(?!.*books). which successfully excludes an ...

javascriptregexnext.jsrequest-headers

Conceal a script-generated div using CSS styling

Using the code below, you can create an HTML chatbox with a link in the top panel and multiple child divs. The structure is as follows: cgroup is the parent of CBG, which is the parent of CGW, and CGW is the parent of the div I want to hide. How can I u ...

javascriptjqueryhtmlcssembed

The @mouse-down event in Vue does not seem to be firing

I'm new to web development and I'm having some issues with Vue. I learned from a tutorial that I can use @click when a button is pressed, and it works fine. Now I want to create a simple mechanism to detect when the mouse is clicked and released ...

javascripthtmlvue.js

Steps for passing a Javascript variable through POST method and then redirecting to a different page

I am facing an issue with sending a JavaScript variable via POST to a PHP page and displaying the new page. Despite checking the variable using Wireshark and confirming that it is sent correctly (key and value), the new page does not show anything. $(docu ...

javascriptphpjquery

Refreshing chord chart information from a JSON source in d3.js

I have two functions that are responsible for creating and drawing a D3 chord diagram representing the netflow between different IP addresses in our network. Function 1 (for creating the chord diagram) function createChords(jsonURL, containerID, tooltipI ...

javascriptjqueryjsond3.js

Managing the scrolling direction horizontally with waypoints.js

As I work on creating a custom wizard form with waypoints, I've encountered an interesting issue that has left me puzzled. In my sample CODEPEN, you can see two pages of the wizard process to better understand the problem. Upon clicking the forward ...

javascriptjquerycssjquery-waypoints

Responsive Video Embed Using Bootstrap-5

I'm facing some challenges with Bootstrap responsive video embedding. It seems like the parent container is not responding to changes, only the content within the <iframe> tag is being responsive. Any idea what might be going wrong? .embed- ...

htmlcssbootstrap-5video-embedding

I'm struggling to figure out why my code is throwing an Unexpected token error. What am I missing here?

I keep encountering an Unexpected token error in my code, specifically with a closing parenthesis ). What exactly does this error signify? Experimented by adding and removing parentheses as well as curly brackets. const getUserChoice = userInput => {u ...

javascript

Embracing Error Handling with ES6 Promises

I am seeking clarification on how errors travel through a series of then continuations to a catch continuation. Consider the following code: Promise.reject(new Error("some error")) .then(v => v + 5) .then(v => v + 15) .catch(er ...

javascriptpromiseecmascript-6es6-promise

CSS: "Cutting-edge" design. In what way?

I am seeking to replicate a design similar to that of Fantastical's website (https://flexibits.com/fantastical), where the edge of a screenshot extends beyond the page boundary. As the user resizes the window, more of the screenshot becomes visible. A ...

jqueryhtmlcssresponsive

Generating a JavaScript bundle using the npm TypeScript compiler

Is there a way to compile TypeScript source files into one JavaScript bundle file? We have developed a tool on node.js and are currently using the following TypeScript compilation code: var ts = require('typescript'); ... var program = ts.creat ...

javascriptnode.jstypescriptbundle

By employing a jQuery selector in conjunction with the each method

Currently, I am attempting to shorten a string to a specific pixel width. I found that the most effective method involves utilizing jQuery's selector and potentially employing each on the outcomes. You can view my progress at http://jsbin.com/umawi/ed ...

jquery

Comparing form submission with a button click to pass data using Ajax - success in one method but failure in the other

I am facing an issue with two pieces of jquery code in my Flask application. While one works perfectly, the other is not functioning as expected. Both the form and a button trigger the same function through ajax calls. Currently, for troubleshooting purpos ...

javascriptjquerypythonajaxflask

Is window.open exclusive to Firefox?

Apologies if this question has been asked before! I am experiencing some issues with my Javascript code. It works perfectly in Firefox and opens a pop-up window as expected. However, in IE 9 it does nothing, and in Chrome it behaves like a link and change ...

javascripthtml