Is it possible to capture the child element's id?

After loading several images onto the page, I hide them using 'display:none':

<div id="cont-img">
    <img class="lista-img" src="list/1.png" id="v1" />
    <img class="lista-img" src="list/2.png" id="v2" />
    <img class="lista-img" src="list/3.png" id="v3" />
    <img class="lista-img" src="list/4.png" id="v4" />
    <img class="lista-img" src="list/5.png" id="v5" />
    <img class="lista-img" src="list/6.png" id="v6" />
    <img class="lista-img" src="list/7.png" id="v7" />
    <img class="lista-img" src="list/8.png" id="v8" />
    <img class="lista-img" src="list/9.png" id="v9" />
    <img class="lista-img" src="list/10.png" id="v10" />
    <img class="lista-img" src="list/11.png" id="v11" />
    <img class="lista-img" src="list/12.png" id="v12" />
    <img class="lista-img" src="list/13.png" id="v13" />
</div>

Next, I decide to display 8 of these images in a table:

<table align="center">
    <tr id="riga-img">
        <td class="td-img" id="iv1"></td>
        <td class="td-img" id="iv2"></td>
        <td class="td-img" id="iv3"></td>
        <td class="td-img" id="iv4"></td>
        <td class="td-img" id="iv5"></td>
        <td class="td-img" id="iv6"></td>
        <td class="td-img" id="iv7"></td>
        <td class="td-img" id="iv8"></td>
    </tr>
</table>

I want to retrieve the ID of the image within a specific table cell when it is clicked. So, I try this jQuery code:

$("#riga-img td").click(function(){
    var id=$(this).child().attr('id');

Unfortunately, this code does not work as expected.

jqueryhtmlcss

Answer №2

Here are some suggestions for you:

  • In case the inner element is an <img>

    var id = $(this).find('img').attr('id');

  • If the inner element happens to be a <td>

    var id = $(this).find('td.td-img').attr('id');

Answer №3

Is this what you are seeking?

When the image with id '#riga-img' is clicked, this function will get the id attribute of the image.

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

Include a navigation bar in the footer of my WordPress Theme's footer.php file

Looking for help with adding a custom footer to my WordPress theme. I have successfully uploaded my static website here, and now I am in the process of making it dynamic. I have added my primary menu to WordPress, but I am unsure of how to exactly add a fo ...

phphtmlcsswordpress

Unexpected strings added to files using jQuery Upload File Plugin, caused by WebKitFormBoundary

I'm currently utilizing a plug-in found at My purpose for using this plug-in is to send files to a WCF Rest Service and save them onto the hard drive. The upload process seems to work fine, however, there is an issue with images, executables, etc. a ...

jquerywcf-restjquery-upload-file-plugin

How can a JQuery function be used with SVG to trigger a second animation immediately after the first animation is finished?

For the handwriting effect animation, I utilized the animation-delay technique by dividing the object wherever it intersected, drawing paths, and converting them into clipping masks. This involved breaking the letter "W" into four parts, creating different ...

htmljquerycsssvgsvg-animate

Steps for Including a Required AMP HTML Attribute in an HTML Tag

Currently working on my website with Gatsby and would like to classify it as an AMP website. What's the best way to include the required AMP attribute in the <html> tag? ...

javascripthtmlgatsbyamp-htmlreact-helmet

Using Angular with OpenStreetMap and $routeProvider allows for dynamic routing and

Check out this awesome single page app that I found: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/simple-example.html However, I am looking to enhance it by adding a menu... <html ng-app="App"> <head> <lin ...

javascriptjqueryhtmlajaxangularjs

Ways to consistently pause background image in CSS?

I have successfully created a slider using the Slider Revolution Wordpress plugin and am currently customizing it with CSS. I have added a small open space within the slider to display logos of the technologies that I am utilizing. Around this space, I hav ...

csscss-animationskeyframe

Exploring the realms of Django Administrator with external JavaScript integration

Currently, I am working with django 2.0 that includes jquery 2.2.3. My goal is to implement the ImageViewer Javascript app (https://github.com/s-yadav/ImageViewer) on one of my admin pages. I have added the necessary js and css files to the Media class wit ...

javascriptjquerydjango

Creating intersections using (mouse along with another key)

I'm relatively new to working with JavaScript and canvas elements. I have been trying to create a drawing feature that allows users to draw lines as they drag the mouse, but I also want to include another option where holding down a specific key (such ...

javascriptjquerycanvas

Is there a way to hide the thumbnail image when the title is hovered over without using CSS?

I'm currently using a simple jQuery script to switch between two thumbnails when hovering over a div. The code works perfectly for the .thumbs class, but I also want this functionality to work with the post titles. Unfortunately, adding the .headline ...

javascriptjqueryhtmlwordpresshover

The alignment of two responsive divs is off

My goal is to create two responsive columns of divs that stack on top of each other as the screen size decreases. The challenge I am facing is getting these divs to always be centered and sit next to each other, using only inline CSS. <div id="containe ...

csshtml

display dynamic content from ajax request in colorbox

I'm having trouble loading an ajax response into a colorbox. When I click on the colorbox, it should display a loading image until the content is fetched and shown. This is my code: jQuery(".likeBar").colorbox({initialWidth:'460px', initia ...

jquerycolorbox

How can I create my own unique scrolling behavior in JavaScript?

Looking to create a similar effect as seen on this website: where the vertical scrollbar determines the movement of the browser "viewport" along a set path. I believe that using Javascript to track the scroll bar value and adjust background elements acco ...

javascripthtmlcssinteractive

Master the Art of Animating Letters in the DOM by Navigating Through Any Array of Characters

I am attempting to implement a typewriter effect animation where a new message is displayed and animated as I type into an input box. Initially, I tried using a global char variable to iterate through each element of the array. However, whenever I passed ...

javascripthtmldomiteratorclosures

What strategies can I use to keep an element in place while implementing parallax scrolling?

Looking for some assistance with my Codepen project. I am attempting to replicate a layout similar to this BBC article design from the past, but hitting a roadblock with getting my image to be position fixed based on scrolling. I believe that if I can suc ...

javascriptjqueryparallax

Guide on sending information using ajax using a button within a form

I've been working on creating a form that utilizes HTML5 validations and integrates Ajax to show the status of mail sending. However, I'm facing an issue where clicking the send button does not initiate the expected action. Form HTML: <div c ...

javascriptphpjqueryhtmlajax

Displaying an alert on a webpage that shows a label input using JavaScript and

I'm currently working with HTML5 and JavaScript and I'm facing a challenge. I want to create a feature where users can input any word into a label, and when they click on a button, an alert is triggered with the given text. However, despite my ...

javascripthtml

Tips for using Python to capture specific HTML snippets

Here is a Python code snippet that I am working on: def parseAddressInfo(text): text = re.sub('\t', '', text) text = re.sub('\n', '', text) blocks = re.findall('<div class="result-box" ...

pythonhtmlregex

Unlimited icon carousel crafted with CSS

Currently, I have a set of 10 icons that are scrolling horizontally from right to left. However, I am encountering an issue where at the end of the icon loop, there is a space causing the icons to jump back to the beginning. I am looking for a solution to ...

htmlcssinfinite-scroll

The submit button click does not trigger the execution of ajax code

I'm faced with a challenge when trying to implement an ajax call in my form. My goal is to display a spinner on the screen to indicate that the form is processing and submitting information. However, it seems that the ajax call is not being triggered ...

jqueryhtmlajaxforms

My extensive AngularJS application is suffering from sluggish performance, attributed to an overwhelming number of files and

After developing an AngularJS application with multiple JavaScript files, I encountered a bottleneck. Chrome restricts the number of TCP connections to 6 at a time, causing additional requests to wait until the initial 6 are completed. This leads to signif ...

javascripthtmlangularjsgoogle-chrometcp