How do I edit multiple class names?
Question
My html:
<a id="Year2016">2016</a>
<div class="Month">
<a class="Jan">Jan</a>
<a class="Feb">Feb</a>
<a class="Mar">Mar</a>
<a class="Apr">Apr</a>
<a class="May">May</a>
<a class="Jun">Jun</a>
<a class="Jul">Jul</a>
<a class="Aug">Aug</a>
<a class="Sep">Sep</a>
<a class="Oct">Oct</a>
<a class="Nov">Nov</a>
<a class="Dec">Dec</a>
</div>
My js:
$("#Year2016").click(function() {
$('.Month a').attr("class", $('.Month a').attr('class') + "2016");
});
my code is changing all the classes to "Jan2016" when I'm trying to just add "2016" to the end of each individual class. I've been messing around with the $.each() function to fix this, but I can't wrap my mind about how to use it correctly.
Update: Someone deleted this answer, but this works as well;
$("#Year2016").click(function() {
$('.Month a').each(function(){
$(this).attr("class", $(this).attr('class') + "2016");
});
});
4 answers
solution1
0 2015-08-29 22:33:42
I think he wants to append the year to the end of the month. In that case
$(document).ready(function(){
$("#Year2016").click(function() {
$('.Month').children('a').each(function () {
var newVal = this.text+" 2006";
this.text = newVal;
});
});
});
Output: Jan 2006 Feb 2006 Mar 2006 Apr 2006 May 2006 Jun 2006 Jul 2006 Aug 2006 Sep 2006 Oct 2006 Nov 2006 Dec 2006
solution2
0 2015-08-29 22:40:24
This should do the trick... let me know if you need anything else?
//HTML
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
</head>
<body>
<button onclick="addYear();">2016</button>
<div id="year">
<a class="Jan">Jan</a>
<a class="Feb">Feb</a>
<a class="Mar">Mar</a>
<a class="Apr">Apr</a>
<a class="May">May</a>
<a class="Jun">Jun</a>
<a class="Jul">Jul</a>
<a class="Aug">Aug</a>
<a class="Sep">Sep</a>
<a class="Oct">Oct</a>
<a class="Nov">Nov</a>
<a class="Dec">Dec</a>
</div>
</body>
</html>
//JS (index.js)
function addYear(){
var year = document.getElementById("year");
var months = year.children;
for(var i=0; i < months.length; i++){
var month = months[i].className;
var addYear = month.concat("2016");
months[i].setAttribute("class", addYear);
}
}
solution3
0 ACCPTED 2015-08-29 22:56:31
You can use attr 's function to set the class for each element in the collection, eg:
$('.Month a').attr('class', function(idx, val) {
return val + '2016';
});
Here's a fiddle
Note: if you have multiple classes, 2016 would be appended to the last class, eg:
<a class="Jan example"> --> <a class="Jan example2016">
solution4
0 2015-08-30 00:04:22
Judging by your description your current approach seems rather convoluted. Personally I would approach this whole issue with a simple MVVM library. A neat example is Vue.js .
Keeping your data and display logic separately would allow you to avoid moving the information back and forth unnecessarily.
var v = new Vue({ el: '#vue', data: { years: [2014, 2015], index: 0, months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] }, methods: { select: function (i) { this.index = i; }, foo: function () { var i = this.$$.select.selectedIndex; alert('get ' + this.months[i] + this.years[this.index]); } } });
a { margin: 0 5px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.12/vue.min.js"></script> <div id="vue"> <p><a href="#" v-repeat="year: years" v-on="click: select($index)">{{year}}</a></p> <select class="links" v-el="select"> <option v-repeat="month: months">{{month}} {{years[index]}}</option> </select> <button type="button" v-on="click: foo()">Download</button> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.