I've 5 different static pages: index.html syllabus-link.html advanced-linux.html contact.html gallery.html.
The functionality is quite simple - User clicks on one of the syllabus type and the user is presented with a `word file' having 2 options:
1) Download
2) View its contents.
The syllabus menu-header is not clickable, but when the user hovers on it, it would list the syllabus types in its dropdown-menu.
Let's say, I'm on index.html page and being there, I decided to click on "Linux" option from the dropdown-menu of syllabus page. The Linux word file gets displayed on the screen with options for the user to either view it's contents or download the word file(based on jQuery condition written in syllabus page). Now that I've landed on the syllabus page and this time when I try clicking on other options viz.., "Hadoop" or "CCNA", nothing shows up. But had I tried clicking either of "Hadoop" or "CCNA" option being on index.html page, it displays the correct "word file".
From external page ==> click works
Being on syllabus page ==> click doesn't work
Functionality is similar to what is shown ==>> https://www.atcs.com/ ABOUT US
section
I understand that if I write <a href="#">in syllabus page, then the current issue can be fixed, but I would lose the current working functionality. How do I achieve both?
Any help would be highly appreciated !!!
index.html
<div class="row">
<div class="headerlogo four columns">
<div class="logo">
<a href="index.html">
<h4>Linux classes</h4>
</a>
</div>
</div>
<div class="headermenu eight columns noleftmarg">
<nav id="nav-wrap">
<ul id="main-menu" class="nav-bar sf-menu">
<li class="current">Home</li>
<li><a>Syllabus</a>
<ul class="syllabus-options">
<li><strong>Linux</strong></li>
<li><strong>Hadoop</strong></li>
<li><strong>CCNA</strong></li>
</ul>
</li>
<li>Advanced Linux</li>
<li>Contact Me</li>
<li>Personal Gallery</li>
</ul>
</nav>
</div>
</div>
syllabus-link.html
<div class="row">
<div class="headerlogo four columns">
<div class="logo">
<a href="index.html">
<h4>Linux classes</h4>
</a>
</div>
</div>
<div class="headermenu eight columns noleftmarg">
<nav id="nav-wrap">
<ul id="main-menu" class="nav-bar sf-menu">
<li class="current">
Home
</li>
<li>
<a>Syllabus</a>
<ul class="syllabus-options">
<li><strong>Linux</strong></li>
<li><strong>Hadoop</strong></li>
<li><strong>CCNA</strong></li>
</ul>
</li>
<li>
Advanced Linux
</li>
<li>
Contact Me
</li>
<li>
Personal Gallery
</li>
</ul>
</nav>
</div>
</div>
<div id="linuxSyllabus" style="text-align: center;">
<!-- GOOGLE MAP IFRAME -->
<font color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>View
</blink></font> the complete Linux syllabus:
</b>
</h5></font>
<p align="center">
<a href="syllabus.htm" view> <img border="0"
src="images/icon_word.png" alt="syllabus" width="75" height="75">
</a>
</p>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>Download
</blink></font> the complete Linux syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/0- Linux-Syllabus-Jan-2015.rtf" download> <img
border="0" src="images/icon_word.png" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
<div id="hadoopSyllabus" style="text-align: center;">
<!-- GOOGLE MAP IFRAME -->
<font color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>View
</blink></font> the complete Hadoop syllabus:
</b>
</h5></font>
<p align="center">
<a href="syllabus.htm" view> <img border="0"
src="images/icon_word.png" alt="syllabus" width="75" height="75">
</a>
</p>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>Download
</blink></font> the complete Hadoop syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/0- Linux-Syllabus-Jan-2015.rtf" download> <img
border="0" src="images/icon_word.png" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
<div id="ccnaSyllabus" style="text-align: center;">
<font color="red"><h5>
<b>Click on the PDF icon to <font color="blue"><blink>View
</blink></font>the complete CCNA syllabus:<br><br>
<a href="documents/2- CCNA-Syllabus.pdf" target="_blank">
<img border="0" src="images/icon_pdf.jpg" alt="syllabus" width="75" height="75">
</a>
</b>
</h5></font>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the PDF icon to <font color="blue"><blink>Download
</blink></font> the complete CCNA syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/2- CCNA-Syllabus.pdf" download> <img
border="0" src="images/icon_pdf.jpg" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
JS file within syllabus-link.html
<script type="text/javascript">
$(document).ready(function() {
var anc = window.location.href.split('#')[1];
var pageURL = $(location).attr("href");
if (document.getElementById(anc) == linuxSyllabus) {
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#linuxSyllabus").show();
} else if (document.getElementById(anc) == hadoopSyllabus) {
$("#linuxSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#hadoopSyllabus").show();
} else if (document.getElementById(anc) == ccnaSyllabus) {
$("#linuxSyllabus").hide();
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").show();
}
});
</script>
Thanks for making it more clear on what you are trying to accomplish, the html and javascript you added helps significantly. The issue you are seeing is the javascript is only being run once on page load. I would recommend wrapping that up in a function, that way you can call it on page load, as you are doing now, as well as every time one of those links is clicked.
js file within syllabus
<script type="text/javascript">
$(document).ready(function() {
// this will get called when you want to swap the visible div
function updateVisibleDiv(viewName) {
// we are going to pass in a string as viewName, we want to check it against a string
// also, I added show for each syllabus, since we will be calling this to change
// which syllabus is visible, we have to show the one they select
if (viewName == 'linuxSyllabus') {
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#linuxSyllabus").show();
} else if (viewName == 'hadoopSyllabus') {
$("#linuxSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#hadoopSyllabus").show();
} else if (viewName == 'ccnaSyllabus') {
$("#linuxSyllabus").hide();
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").show();
}
}
// this will get run on page load - I like wrapping it in a function to make
// it more clear what we are doing on page initialization
function init() {
var syllabus = window.location.href.split('#')[1];
// syllabus should equal one of ['linuxSyllabus', 'hadoopSyllabus', 'ccnaSyllabus']
// we pass it in to our function, and it loads the correct screen
// up to this point, the page will work the same as it always has, this is just a refactor
updateVisibleDiv(syllabus);
}
// this will be the new functionality that updates which syllabus is visible
// this will be called when a link is clicked
function updateView() {
// get the value in your href from the clicked link
var syllabus = this.getAttribute('href').split('#')[1];
// now we will just update the visible div
updateVisibleDiv(syllabus);
}
// we are going to attach a click event to those three links
// this is selecting all 3 links by their id, and adding an on click event handler
$('#linux, #hadoop, #ccna').on('click', updateView);
// call the init function to initialize the page
init();
});
</script>
Disclaimer: I wasn't able to test this myself, let me know if you have any issues and I can try to help you work through them.
One big problem is that your conditionals within the if and else if statements should be using strings.
eg. if (document.getElementById(anc) == 'linuxSyllabus')
Secondly, you are using selectors within each conditional, and as far as I can tell those id's do not exist in the html. Your id's are linux, hadoop, and ccna.
You will want to select those as $('linux') OR by the href like this:
$("a[href='#linuxSyllabus'")
I'm somewhat unsure of the problem you are actually looking to solve, but those are some code issues that jump out at me. Also try checking the console in your browser and you'll surely see some errors.
I don't know it is what you looking for or not. I just give a solution whatever I can understand from your description.
You can use a common class for every syllabus container in syllabus like .syllabusContainer and change js like below
<script type="text/javascript">
$(document).ready(function() {
var anc = window.location.href.split('#')[1];
var pageURL = $(location).attr("href");
$(".syllabusContainer").hide();
$("#"+anc).show();
});
</script>
in syllabus page use same menu link as index.html
Related
I wanted to create a modal of sorts to open when a <li> offering additional information about a topic is clicked. I created a popUpTrigger that responds to a user "click" and then gathers the provided section (and all tags nested inside) and moves it to the popUp div that then appears on the page. I've taken necessary precaution in case the section is empty in which an alert will sound. However, the alert still fires when a section is not empty (it has text and contains an additional anchor tag). I'm not sure why this is happening.
When I console log, I see the nested anchor tag is being viewed by the browser as a separate entity to the section. I've tried nesting the anchor tag further within a div element and rewriting the javascript so the html of the nested anchor tag will be evaluated accordingly as part of the section but all to no avail. This backfiring only occurs when an additional anchor tag is included in the section element of the HTML.
HTML
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</a>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
JavaScript
$('a.popUpTrigger').on('click', function() {
$(this).addClass('selected');
if ($('.selected')) {
let messageArea = $('.selected > section.hide');
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
I removed the children from your anchor, and instead used NEXT. Also your if statement was not needed. I left .selected in the code just in case you wanted to style the anchor when clicked.
$('a.popUpTrigger').on('click', function() {
$('a.popUpTrigger').removeClass("selected");
$(this).addClass('selected');
let messageArea = $(this).next("section");
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
.selected{color:red;}
.hide{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card </a>
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
You have the following code
<a href="#">
</a>
It is not valid to have nested anchors in HTML. So the browser breaks it up when it renders. That is why you are seeing it act weird.
You will need to stick the pop up code outside of the element.
<a class="popUpTrigger" href="#">
Get a Library Card
</a>
<section class="hide">
<p>Foo</p>
Bar
</section>
and reference it with next()
$(".popUpTrigger").on("click", function (e) {
e.preventDefault();
var anchor = $(this);
anchor.next('section').toggleClass("hide");
});
I've tried every combination/individual selector and cannot figure this one out.
I have a 'wrapper' page that has two primary divs with id's:
toc-container
topic-container
The topic-container div has an html page loaded into it (that I cannot modify the source of), via the jquery .load function.
There are tags in those loaded pages that have href elements that I need to loop through and change. Here is the html of the loaded page:
<div id="help-content">
<table class="relatedtopics aboveheading" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td width= "16">
<p class="bodytext"><img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
<td width= "16">
<p class="bodytext"><img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
<td width= "16">
<p class="bodytext"><img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
</tr>
</table>
<p class="bodytext">Contact your system administrator for instructions to change your password.</p>
<p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
<p class="bodytext">Complete the following steps to change your password:</p>
<ol class="numberlist"><li class="numberlist">On the Logon window, click the <span class="procedureinterfaceelement">Change Password</span> link.</li><li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.</li><li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.</li><li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li></ol></div>
I have this function that is called after the page is loaded:
$('#help-content').find('a').each(function() {
var initHref = $(this).attr('href');
console.log(initHref);
var prefix = '?topicID=';
var newHref = prefix+initHref;
$(this).attr('href', newHref);
});
How can I change all href values in the page using jquery? I've tried targeting every selector possible : (
You can use the following vanilla JavaScript statement to get all anchor tags on the page
document.querySelectorAll('a')
Hope this helps you to get an initial idea on how to extend it for your solution. Happy coding.
1. Your code works, but you were only logging the original
href values. If you log again at the end of your code, you'd see the changes.
A more simple selector would be just $('#help-content a') and then you wouldn't need the .find() method call.
The JQuery .each() method is automatically passed arguments
that make referencing the element being enumerated a bit more simple,
so use that.
_target=self is only necessary if you are using the no
longer supported frameset element in your code. By default, links
open in the current window.
The vspace and hspace HTML attributes are deprecated.
All the other styling of your images (and your td elements, and really everything else) should really be done
with CSS. And, because all your styling is identical for each of
the images, a single CSS rule can set them all up.
Although your code does work, your prefix and newHref variables
aren't really necessary since you only use them once.
// When the DOM is ready...
$(function(){
$('#help-content a').each(function(idx, el) {
var initHref = $(el).attr('href');
$(el).attr('href', '?topicID=' + initHref);
console.log("Original href: " + initHref, " - New href: " + $(el).attr('href'));
});
});
/* Don't use HTML to style your page. That's what CSS is for.
And, using CSS will remove the need for redundant HTML. */
#help-content img {
height:16px;
width:17px;
text-align:bottom;
border:none;
}
#help-content table.relatedtopics { border-collapse:collapse; border:none; border-spacing:0; }
#help-content table.relatedtopics tr { vertical-align:top; }
#help-content table.relatedtopics td { padding:0; width:16px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="help-content">
<table class="relatedtopics aboveheading">
<tr>
<td>
<p class="bodytext">
<a href="overview.htm">
<img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home">
</a>
</p>
</td>
<td>
<p class="bodytext">
<a href="accessing_solutions.htm">
<img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic">
</a>
</p>
</td>
<td>
<p class="bodytext">
<a href="best_practice_browser.htm">
<img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic">
</a>
</p>
</td>
</tr>
</table>
<p class="bodytext">Contact your system administrator for instructions to change your password.</p>
<p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
<p class="bodytext">Complete the following steps to change your password:</p>
<ol class="numberlist">
<li class="numberlist">On the Logon window, click the
<span class="procedureinterfaceelement">Change Password</span> link.
</li>
<li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.
</li>
<li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.
</li>
<li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li>
</ol>
</div>
I have a 2-tab content slider for the mobile section of my site. The user clicks on the linked image within the <li> element and the corresponding content loads. I would like the image to change color when in an "active" state, so pretty much a new image to be loaded when the user clicks it.
This is only for mobile sites so please bear that in mind when offering solutions. Thanks All!!
<div id="tabs" class='tabs no-screen no-ie'>
<ul>
<li>
<img src="img/mobile/bingo.png" width="70" height="70" alt="Super Free Bingo" />
</li>
<li>
<img src="img/mobile/slots.png" width="70" height="70" alt="Super Free Logo" />
</li>
</ul>
<div id='tab-1' class="tab-box">
<?php include 'includes/sfb.php'; ?>
</div>
<div id='tab-2' class="tab-box">
<?php include 'includes/sfsg.php'; ?>
</div>
</div>
If I understood that correctly, when the user clicks the image, the image changes. Seeing as you only have two images, we can do the following:
Add a unique id to your target images.
<img src="img/mobile/bingo.png" id="image-1">
<img src="img/mobile/slots.png" id="image-2">
Add a JavaScript OnClick event for each image that will also reset the other image.
$('#image-1').click(function() {
$(this).attr('src', 'img/mobile/newImage1.png');
$(this).parent().parent().css('background-color', 'white');
$('#image-2').attr('src', 'img/mobile/slots.png');
$('#image-2').parent().parent().css('background-color', 'orange');
});
$('#image-2').click(function() {
$(this).attr('src', 'img/mobile/newImage2.png');
$(this).parent().parent().css('background-color', 'white');
$('#image-1').attr('src', 'img/mobile/bingo.png');
$('#image-1').parent().parent().css('background-color', 'orange');
});
Check This Demo for reference
Demo
$(".a").click(function(){
$(".a").each(function(index){
$("#id"+(index+1)+" a img").attr('src',a[index]);
});
var x=$(this).attr('id');
var y=x.split('id')[1];
$("#id"+(y)+" a img").attr('src',b[y-1]);
});
I have this jQuery function :
$(".clack").hide();
$('.click').click(function(){
$(".clack").fadeThenSlideToggle();
});
Works great except all clack classes are toggled now.
Any idea how to open only the first class .clack after the clicked class .click?
I tried .clack:first but this results in only the first instance of class .clack being opened.
I want to open the first class .clack found after the clicked class .click.
I know I can rewrite my html and jQuery function with other solutions but the problem is the amount of data already existing for this function is very big.
My HTML :
<img class="click" style="cursor: pointer;" src="someimg.jpg"/>
<div class="clack">TEST TEXT1</div>
<img class="click" style="cursor: pointer;" src="someimg2.jpg"/>
<div class="clack">TEST TEXT2</div>
<img class="click" style="cursor: pointer;" src="someimg3.jpg"/>
<div class="clack">TEST TEXT3</div>
EXACT HTML EXAMPLE :
<strong>
<span>
<img class="aligncenter click" src="img1.jpg" alt="vesteging" width="436" height="36" />
</span>
</strong>
</p>
<div class="clack">
<center>
<span style="font-size: 10pt;">DATA TEXT 1</span>
</center>
</div>
<p> </p>
You can target only the .clack that comes immediately after the clicked .click
$('.click').click(function(){
$(this).next(".clack").fadeThenSlideToggle();
});
Is it possible to change the text "mars-on-newyork" from this links, this is how the links looks like:
<ul>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-red"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-green"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-blue"/>
</a>
</li>
</ul>
This code changes my images only:
function changeIt(objName) {
var obj = document.getElementById(objName);
var objId = new Array();
objId[0] = "newyork";
objId[1] = "paris";
objId[2] = "tokyo";
var i;
var tempObj;
for (i = 0; i < objId.length; i++) {
if (objName == objId[i]) {
obj.style.display = "block";
} else {
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
and here is the rest of the html from which the java script changes only the pictures:
<div id="newyork">
<a href="#">
<img src="newyork.jpg"/>
</a>
</div>
<div id="paris" style="display:none">
<img src="paris.jpg" border="0" alt="one"/>
</div>
<div id="tokyo" style="display:none">
<img src="tokyo.jpg" border="0" alt="two" />
</div>
<div style="display:none;">
<a id="one" href="#" onclick="changeIt('newyork');"><img src="newyork.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="two" href="#" onclick="changeIt('tokyo');"><img src="tokyo.jpg" border="0" alt="two"/></a>
</div>
If i click on
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
i want the text from the links on the ul to change from this:
href="google.com/finder.php?offer=mars-on-newyork
to this:
href="google.com/finder.php?offer=mars-on-paris
and if i click on
<a id="one" href="#" onclick="changeIt('tokyo');"><img src="paris.jpg" border="0" alt="one"/></a>
it changes it to
href="google.com/finder.php?offer=mars-on-tokyo
i want the java script to work like it does, how it changes the images but i also want to take advantage of the click to change the text.
thanks!
I see how it is now, i guess my post wasn't good enough to have piqued you're interest's, i guess i would have to pay a freelancer to help me, thanks anyways guys for your time and help!
Quick answer to "Is it possible to add or change and id from a link?":
$('#link').attr('id', 'yourNewId'); // Change id
Quick solution to "What I also want is not to just change the images but also the id or link"
$('#link').attr('href', 'yourNewUrl'); // Change link
I'm finding it a little hard to understand what you're trying to do, but...
what i also want is not to just change the images but also the id or link from the ul list e.g
OK, to change the link, i.e., the href property of all anchor elements in your ul list, assuming the URL has a fixed format and we can just replace whatever comes after the last "-":
// assume objName = "paris" or whatever
$("ul a").attr("href", function(i, oldVal) {
return oldVal.substr(0, oldVal.lastIndexOf("-") + 1) + objName;
});
If you pass the .attr() method a callback function it will call that function for each element and pass the function the current value - you then return the new value.
The elements in question don't seem to have an id at the moment, so I'm not sure what you mean by wanting to change it.