Leverage the power of jQuery's filter feature

<div class="main">
    <a title="here" href="http://google.com">google.com</a>
    <a title="sss" href="www.sss.com">sss</a>
    <a title="sss" href="www.sss.com">sss</a>
    <a title="sss" href="www.sss.com">sss</a>
    <a class="click" href="#">check site</a>
</div>
<div class="main">
    <a title="here" href="http://stackoverflow">stackoverflow</a>
    <a title="sss" href="www.sss.com">sss</a>
    <a title="sss" href="www.sss.com">sss</a>
    <a title="sss" href="www.sss.com">sss</a>
    <a class="click" href="#">check site</a>
</div>
<div class="main">
    <a title="here" href="http://cnn.com">cnn.com</a>
    <a title="sss" href="www.sss.com">sss</a>
    <a title="sss" href="www.sss.com">sss</a>
    <a title="sss" href="www.sss.com">sss</a>
    <a class="click" href="#">check site</a>
</div>

i posted the following code:

$(".click").click(function(){
  alert($(this).parent().filter("[title=here]").attr('href'));
})

but it returns undefined. Is there a way to get the current site from the current DIV?

LIVE: http://jsfiddle.net/uB4ez/

javascriptjqueryhtmlcss

Answer №1

To extract certain items from a result, the filter method can be employed; however, if you are searching for children of the element in the result, it is recommended to utilize the find method:

alert($(this).parent().find("[title=here]").attr('href'));

If you already have all the children and wish to retain only a specific one, then the filter method should be utilized. For example:

alert($(this).parent().children().filter("[title=here]").attr('href'));

Answer №2

.filter() does not include child nodes in its selection.

To target only the immediate children nodes, you can use .children("[title=here]").

If you need to search through all descendant nodes, utilize .find("[title=here]")

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

Display different data in an HTML table for each individual click on the "Read more" event

I am currently extracting data from a SQL table to exhibit it in an HTML table. The issue I am facing is that I would like to implement a "Read More" feature to prevent clutter in the table. As I am retrieving the data row by row, I am utilizing a class n ...

javascriptphpjqueryhtml

Implement a vertical scrolling animation in datatables

I am trying to utilize datatables to display all data. My goal is to have the data automatically scroll row by row every 3 seconds. This is my code, and you can also check it out on jsfiddle The intention is to showcase this data on a large screen. < ...

javascriptjqueryhtmlcssdatatables

Personalized jQuery calendar options

Seeking advice from experienced jQuery users! I am in search of a stylish and customizable jQuery calendar. Despite attempting the jQuery UI Date picker, I am struggling to adjust its CSS settings. Is there a superior alternative that allows for full CSS ...

jquery

Ways to display spinner animations during image loading on Next.js?

Currently, I am attempting to implement a spinner display while images are loading on a Next.js website. To achieve this, I am utilizing the NextUI UI library. My website features several cards, and my goal is to showcase a spinner during the image loadin ...

javascriptreactjsreact-hooksnext.jsnextui

Exporting Canvas data without the alpha channel

I am looking for a way to resize images that are uploaded in the browser. Currently, I am utilizing canvas to draw the image and then resize it using the result from the toDataURL method. A simplified version of the code (without the upload section) looks ...

javascripthtmlcanvasimage-resizingtodataurl

Establishing the default tab in JavaScript

Here's the JavaScript code snippet I have: jQuery(document).ready(function($) { // filtering subcategories var theFilter = $(".filter"); var containerFrame = $(theFilter).closest(".container-frame") var filterHeight = $(".filter").children("li") ...

javascriptjquerytabs

How can I create numerous HTML containers using Javascript?

I've been learning from this tutorial: Instead of just displaying the last database object, I want to display all of them. I have tried outputting the database contents and it's working fine. Now, I just need to adjust the HTML. I attempted to ...

javascripthtmlfirebasefirebase-realtime-database

Tips for circumventing CORS in an ajax request using various browser extensions or add-ons

I am encountering a cross-origin problem with my WCF service. Despite adding an extension in chrome to bypass CORS, the issue persists. Is there any other extension/add-on/plugin available to test the service locally and bypass the CORS problem? Edit Aft ...

javascriptasp.netajaxwcfcors

Issue with Accordion Panel Content Scroll Bar

Hello there, I've encountered a puzzling problem with my website. My objective is to insert a Time.ly Calendar widget into one panel of my accordion. On this page, "TOURNAMENTS: , the widget appears exactly as desired. However, when I replicate the c ...

javascripthtmlcssscrollaccordion

Expansive full screen image proportions

Is there a way to showcase an image on the entire screen without distorting it, while maintaining its aspect ratio in either HTML or Javascript? The desired outcome is for the image to be centered and: - Have a height of 100% and a width of x% (where "x" ...

javascripthtmlcss

JavaScript adding arrays to JSON files

At this point, I feel like I have no other option. Everything appears to be correct from my perspective. However, nothing seems to be working. I decided to create a small food app for myself to keep track of what I'm eating. I set up a JSON file name ...

javascript

Double tap problem with pseudo elements on iOS links

Trying to achieve a scrolling line effect beneath anchor links for a client project led me to attempt some CSS3 coding, only to find myself stuck with an elusive bug after spending hours on it. The issue arises on mobile devices (iOS and Android) where, up ...

htmlcss

gulp-minify-css-names not altering any files during processing

For quite some time, I have been on the search for a solution that can assist me in automating the process of renaming/minifying class names in HTML, JS, CSS files simultaneously throughout my entire project using gulp. While there are many solutions avai ...

htmlcssnode.jsnpmgulp

Automatically Modify Uploaded Files on the Server

There is one thing that has caught my attention. I am interested in working with scripts that can automatically edit a file once it's been uploaded. For example, imagine having a form where someone uploads an HTML file. The script would then edit spe ...

phpjavascripthtml

What are the steps to successfully deploy a static website created with Next.js on Vercel?

Using the Next.js static site generator, I created a simple static site that I now want to deploy on Vercel. However, I keep encountering an error during the build process. While I have successfully deployed this site on other static hosting platforms befo ...

javascriptdeploymentnext.jsvercelstatic-site

"Learn the steps to include multiple g:select options in your application

Click here to download an image Is it possible to dynamically append a combobox below the User combobox when the "ADD" button is clicked using JavaScript? I attempted this with jQuery last night, but I couldn't get it to work properly. <g:select ...

javascriptgrails

Why is the Material Ui code functioning flawlessly in Codepen but not in VSCODE?

In my ReactJS project, I am using Material-UI to create "Material Tabs". The code works fine in SANDBOX but not in my VS CODE. What could be the issue? I have checked that Node is installed and all dependencies versions from NPM are up to date. I also tri ...

javascriptreactjsmaterial-ui

TypeORM is unable to locate the default connection within a class

I have encountered an issue while trying to incorporate TypeORM within a class. It seems to be unable to locate the default connection despite awaiting the connection. I have double-checked the configuration and tested it with .then(), which did work succe ...

javascripttypescripttypeorm

Develop a payment confirmation session using Stripe and Node.js

I have set up a POST request using Stripe to handle customer payments let paymentData = { errorMsg:'', key: process.env.STRIPE_PUBLIC_KEY } const session = await stripe.checkout.sessions.create({ payment_method_types: ...

javascriptnode.jsstripe-payments

Error Event Triggered by AJAX with No Response Data

I am currently facing an issue with an API call I am making. Everything seems to be working fine as I receive the token and a status code of 200 is returned (confirmed in Fiddler). However, the problem arises when the AjaxError event fires and the respon ...

javascriptjqueryajax