Updating the value of an attribute within an HTML element

I need to update a specific attribute's value within certain <div> elements. This new value will come from our CMS and needs to be applied to multiple instances of the same attribute.

For example:

    <div id="1395308878">
    <div class="slides_container">
    <div><a rel="fancy" href="01.jpg"><img border="0" src="01a.jpg"></a><div>
    <div><a rel="fancy" href="02.jpg"><img border="0" src="02a.jpg"></a><div>
    <div><a rel="fancy" href="03.jpg"><img border="0" src="03a.jpg"></a><div>
    </div>
    </div>

    <div id="9995308878">
    <div class="slides_container">
    <div><a rel="fancy" href="04.jpg"><img border="0" src="04a.jpg"></a><div>
    <div><a rel="fancy" href="05.jpg"><img border="0" src="05a.jpg"></a><div>
    <div><a rel="fancy" href="06.jpg"><img border="0" src="06a.jpg"></a><div>
    </div>
    </div>

The goal is to replace the rel="fancy" attribute with rel="id-number", where the number is generated by the CMS. The process should look like this:

    in the DIV with id="a number" <-- generated by CMS
    find the VAR fancy and replace it with the same number <-- that is generated by a CMS.

The desired outcome should be as follows:

    <div id="1395308878">
    <div class="slides_container">
    <div><a rel="1395308878" href="01.jpg"><img border="0" src="01a.jpg"></a><div>
    <div><a rel="1395308878" href="02.jpg"><img border="0" src="02a.jpg"></a><div>
    <div><a rel="1395308878" href="03.jpg"><img border="0" src="03a.jpg"></a><div>
    </div>
    </div>

    <div id="9995308878">
    <div class="slides_container">
    <div><a rel="9995308878" href="04.jpg"><img border="0" src="04a.jpg"></a><div>
    <div><a rel="9995308878" href="05.jpg"><img border="0" src="05a.jpg"></a><div>
    <div><a rel="9995308878" href="06.jpg"><img border="0" src="06a.jpg"></a><div>
    </div>
    </div>

Each number is unique to ensure images are displayed correctly in their respective fancyboxes, and the numbers themselves are provided by the CMS. While I have the ability to modify a template to insert these numbers, they cannot be directly placed where "fancy" is located...

javascriptjqueryhtmlcss

Answer №1

Utilizing the callback function of .attr() can help you accomplish your task,

$('.slides_container [rel]').attr('rel', function(){
  return $(this).closest('div[id]').attr('id');
});

Check out the DEMO here

Answer №2

Imagine that you've saved the CMS identifier in a variable called cms_id;

With jQuery, you can carry out the following action:

$("#"+cms_id +" a[rel = 'fancy']").attr("rel",cms_id)

Here is the code in action: JSFIDDLE

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

Guide on concealing and showcasing an icon within a bootstrap collapsible panel using solely CSS

Hey there, I've been working with Bootstrap's collapsible panel feature and I'm trying to get Font Awesome icons (+ / -) to display based on whether the panel is expanded or collapsed. I'm not too familiar with using CSS for this kind ...

htmlcss

Utilizing jQuery and PHP to Refine Database Search Results

I am a novice currently embarking on my journey to create my first website, integrated with a database system which is also new territory for me. Struggling to decide between jQuery and PHP for a specific task related to data handling, I seek guidance from ...

phpjquerymysqldatabasejson

Working with JSON data in JavaScript's Model-View-

Currently, I am faced with the challenge of working with a client's API that allows me to retrieve a group of orders in JSON format. After implementing the code snippet below, I encountered three alert boxes appearing successively. The first alert box ...

jsonjquery

customized checkbox in Bootstrap 4

I'm facing an alignment issue with my custom ASP.NET Bootstrap 4 checkbox. I can't seem to get it to align properly within the form group row as shown in the picture – Issue with checkbox. The code for the form group row is as follows: <di ...

htmlasp.netcheckboxbootstrap-4

Attempting to clear out a bootstrap-select element and refill it with new options

I've been attempting to clear all the values in a multiselect selectpicker from bootstrap-select, but unfortunately, no matter what method I try, it doesn't seem to work. I attempted to follow the examples provided for the remove method in the m ...

javascripthtmlbootstrap-5bootstrap-selectbootstrap-selectpicker

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

So, here's a strange issue I'm facing. On my website, the background image changes with a smooth fadeIn/Out transition. Video: Website in action: Here is the HTML markup: <div class="fondo" onclick="descargar(2,500);descargar(1,500);"> ...

javascriptjquerycssopacity

I am looking to display the precise text from an HTML file while maintaining the original formatting in a Flutter application

When working with Flutter, I am fetching data from an API and need to display its contents. However, some fields include HTML tags. For example, the data I am receiving looks like this - {"id":509,"topic_name":"HTML testing",& ...

htmlflutterdart

Grab the source attribute of the <img> tag (identified by class) across numerous HTML pages

Here is an example: A website has the URL , where xxxx represents an integer between 1 and 1935. On each page, there may be an <img class="thumbnail" src="Images\Robots\{robotname}.png">. However, not all pages have th ...

javascriptpythonnode.jsweb-scraping

What could be causing the issue with hammer.js swiping functionality on iPhones?

Looking for assistance from those experienced with hammer.js, as I'm facing an issue with swiping/scrolling on iPhones. I have been developing a web app using 8thwall and hammer.js for swipe and scroll functionality. While testing on my Samsung Galax ...

javascriptioscsshammer.js

Error encountered during EJS compilation

I've encountered a frustrating error while attempting to include an if statement within a forEach loop. My goal is to prevent the delete button from appearing for the currently signed-in user's name (e.g., preventing the deletion of their own ac ...

htmlcompilationejs

Encountering a Django Ajax HTTP 500 Error

I'm struggling to integrate Django with AJAX requests, and I keep getting an HTTP 500 error related to MultiValueDictKeyError even though everything seems fine? I passed in 3 variables: sendEmail, username, error When accessing request.POST on the 3 ...

jquerypythonajaxdjango

Transferring data to a PHP script using the power of jQuery

Imagine a scenario where there are two links available. <li><a href="#" id="VALUE1" class="charName">Name 1</a></li> <li><a href="#" id="VALUE2" class="charName">Name 2</a></li> Now, when one of these link ...

phpjqueryajax

Express session not persisting following JQuery Get request

I need to save the server variable that the user inputs. Once they submit, they are directed to another page. On this new page, I check if their server exists and redirect them back if it doesn't. When I make a post request, the session is saved, and ...

javascriptjquerynode.jsexpressexpress-session

What is the most efficient way to integrate JSON Data into a Line of Business Web Application?

Typically, I've been using JSON with jQuery to return HTML strings. However, I'm interested in transitioning to JavaScript objects in my code. What's the easiest way for me to begin using JSON objects on my webpage? Below is a sample Ajax ...

c#jqueryweb-servicesjson

The state variable remains undefined even after integrating useEffect in a React.js component

Hello, I have a component within my React application that looks like this: import React, { useEffect, useState } from "react"; import AsyncSelect from "react-select/async"; import { ColourOption, colourOptions } from "./docs/data"; const App = () => ...

javascriptreactjs

Navigation list not displaying content on mobile devices as expected

Seeking assistance to resolve an issue with a responsive navigation bar implementation on my blog. Despite the presence of links in the navigational menu at 768px, they are not visible when inspected using Chrome. Here is an image for reference: Please See ...

javascripthtmljquerycssvisual-web-developer-2010

"Exploring In-Depth Data Visualization: A Guide to Navigating Charts

It was shocking to me how scarce the information on this subject is. I have a ChartJS pie chart that I would like to delve deeper into by clicking on a slice of the pie. Do you have any suggestions on how to achieve this? ...

javascriptjquerychart.jspie-chartdrilldown

Implementing a gradient effect on a specific image element within an HTML canvas with the help of jQuery

Currently, I'm working on an HTML canvas project where users can drop images onto the canvas. I am looking to implement a linear gradient effect specifically on the selected portion of the image. My goal is to allow users to use their mouse to select ...

javascriptjqueryhtmlcanvas

Is there a way to trigger an AJAX error when the computer loses connection during a jQuery AJAX call?

I've encountered an issue with a standard jQuery ajax request. I attempted to create an error state by disconnecting my computer from the network mid-request (the server takes 10 seconds to reply, making this easy). Surprisingly, when I disconnect, a ...

ajaxjqueryxmlhttprequest

Eliminate the horizontal overflow caused by the HTML video tag

I'm currently facing an issue with using a video as the background for a div on my website. The problem arises when I view it on a smaller resolution, causing overflow on the right side. I've been attempting to solve this without success... You ...

htmlcssvideo