I am looking for a way to select only images that are inside links, so I can add the rel="lightbox" attribute to those links. I have attempted to achieve this using 2 loops but it is not working as expected because it also adds the rel attribute to normal links without images.
Below is the jQuery code I have tried:
$('#floorplans a img').each(function() {
$(this).parent().attr('rel','lightbox[floorplans]');
});
Any help or suggestions would be greatly appreciated. Thank you.
To achieve this task, there is no need for looping (and your outer loop serves no purpose as its result is not utilized). You can simply use a selector to locate images within links, then utilize the closest method to identify each link. Subsequently, you can employ the attr method to iterate through the outcome and apply the attribute to all of them:
$('#floorplans a img').closest('a').attr('rel','lightbox[floorplans]');
a more efficient approach could be:
$('a:has(img)').attr('rel', 'lightbox[floorplans]');
what makes it superior?
This alternative will specifically target the anchors containing images, avoiding unnecessary selection of all images on the page as Guffa's solution does.
By using my method, only the designated anchors will be affected, not the images themselves.
Choose the element with the id "MyImage" that is a child of an anchor tag
My form originally only submitted one out of eight radio buttons to a PHP $_POST super global array, so I needed some validation. Thankfully, I received help with this code: $("#form").submit(function (event) { if(!$(":radio:checked").length) ...
After much searching and attempting, I am still unable to achieve a simple task. My goal is to apply display inline-block to some divs while aligning them in a row, similar to the image below: https://i.sstatic.net/iLhLS.png The issue arises when number ...
Looking for assistance with converting a modal from static, fake data to dynamic data from an SQLite3 database. The goal is to display a table of existing data and allow users to add new rows by clicking a +New button. However, when trying to incorporate ...
Is there a way to merge one image into another by using a transparent box? It's not just about copying and pasting an image into another. I also want to know how to transform the image to fit perfectly within the other image. For example, similar to ...
I am in the process of developing a responsive menu for my react app, but I'm facing some challenges as a newcomer to react. In order to achieve the desired functionality, I am trying to incorporate jQuery for menu toggling. However, when I attempt to ...
Currently in the process of creating my own website using the "Call Me Sam" hugo theme. Everything looks great locally but once deployed on Netlify, the CSS styling seems to be completely disregarded. If you want to check out my repository: https://github ...
Trying to integrate an additional text element next to an input using angular-material. The goal is to replicate the functionality of bootstrap's .input-group-addon: The closest approach achieved so far can be seen in this example: <md-content la ...
My goal is to create a flex column layout where the image appears first. However, I'm facing an issue with the code below, as it only changes the order when the flex direction is set to row (image on the left). It does not work for rows. </head> ...
Is it possible to conceal text from on-page browser searches (e.g. Ctrl+F) in a dependable manner while keeping it visible? I thought that adding aria-hidden="true" would address the issue, but the text remains searchable by browsers. ...
When I resize the browser, an error code google-visualization-errors-8 appears in my Google chart's CSS. https://i.stack.imgur.com/4LX1C.png What could be causing this error to occur? Note: I am redrawing the graph every time the screen is resized. ...
In a display with two columns, I want to be able to perform a common operation (such as delete) based on the selection of certain div IDs. If a user selects the div IDs participant_1, participant_4, participant_6 at the same time, I need to collect these ...
Currently, I have a form that requires processing using Ajax. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <div class="column1"> <form class="form box" action="javascript:networkCheck();" ...
Our team is currently working on multiple microservices simultaneously. While traditional microservice architecture discourages code sharing and reuse between services, we are considering the benefits of consistent styling across all services that have Web ...
I'm currently working on a script that dynamically sets the font-size based on the container's dimensions and the length of the text. This is what I have implemented so far. window.onload = function () { var defaultDimensions = 300; ...
I'm encountering an issue with my navbar. Whenever I open the dropdown menu, the width of my page changes but returns to normal when it is closed. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="styl ...
Is it true that using jquery in angular is considered bad practice? I've heard that when needing to manipulate the DOM, one should use directives. But why is it advised against to directly use jquery in the controller?? ...
window.onload = function() { var dataPoints = []; // fetching the json data from api via AJAX call. var X = []; var Y = []; var data = []; function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("applicatio ...
I'm really struggling with this and can't seem to find a solution anywhere. I want to capture data when button A is clicked, and then submit that data via AJAX when button B is clicked. Here's what I've been considering: $(document).o ...
Currently, I am working on customizing a Wordpress theme that features a grid view. My goal is to dynamically load posts on the same page, similar to how it works on Twitter. I have experimented with various plugins such as infinite scroll, but unfortunate ...
I am facing an issue with a script that is supposed to send data to a PHP file when a user clicks on an element, but unfortunately, it's not functioning correctly. Below is the jQuery code: jQuery( document ).ready(function( $ ) { $('.rve_b ...