Retrieving multiple data attributes and setting child element as text
Bottom line:
I am unable to get the value of multiple data attributes and insert them as the text of the child element.
More details:
I have table
with each tr
"bucket" containing a certain number of three kinds of shapes (spheres, cubes, pyramids) that are stored in data-attribute
s. I have one ul
with a corresponding one li
for each shape. When a shape is validated, tr
more than 0 of that shape is highlighted . HOWEVER, I am also trying to get the number for each selected shape and display it in an item td.contents
for each tr
(ie "pyramids: 300, cubes: 50") and this is what I have failed.
Here the HTML is -
<ul>
<li data-shape="spheres">spheres</li>
<li data-shape="cubes">cubes</li>
<li data-shape="pyramids">pyramids</li>
</ul>
<table>
<tr data-spheres="380" data-cubes="0" data-pyramids="200"><td>bucket 1</td><td class="contents">no shapes selected</td></tr>
<tr data-spheres="0" data-cubes="90" data-pyramids="0"><td>bucket 2</td><td class="contents">no shapes selected</td></tr>
<tr data-spheres="100" data-cubes="20" data-pyramids="400"><td>bucket 3</td><td class="contents">no shapes selected</td></tr>
<tr data-spheres="500" data-cubes="110" data-pyramids="0"><td>bucket 4</td><td class="contents">no shapes selected</td></tr>
</table>
And JS (line 22 where i'm having problems) -
(function() {
//store tr elements
var buckets = $('tr');
$('li').click(function () {
//toggle checked class OK
$(this).toggleClass('checked');
//reset classes and .contents text OK
$(buckets).removeClass('active');
$('td.contents').text('no shapes selected');
//map the shape data attribute for all li elements
//with class '.checked' OK
var checkedShapes = $('.checked').map(function() {
return $(this).data('shape');
});
//for each checked shape, filter tr elements with
//more than 0 of that shape OK
$.each(checkedShapes, function( index, value ) {
var filteredBuckets = $(buckets).filter(function() {
return $(this).data(value) > "0";
});
//add .active class to those tr elements OK
$(filteredBuckets).addClass('active');
//get number of checked shapes (i.e. "pyramids: 300, cubes: 50")
//and display in td.contents DOESN'T WORK
$('tr.active td.contents').text($(this).parent('tr').data(value));
});
});
})();
And a jsFiddle: http://jsfiddle.net/a8gtrn63/33/
From what I understand in the docs for .data()
, this should retrieve the selected data attributes, but it doesn't. I think there may be a problem with the link value
, but I'm having problems with that. Any input is appreciated.
source to share
This is how your code should look the same:
(function() {
//store tr data-attributes
var buckets = $('tr');
$('li').click(function () {
//toggle checked class
$(this).toggleClass('checked');
//reset classes and .contents text
$(buckets).removeClass('active');
$('td.contents').text('no shapes selected');
//map the shape data attribute for all li elements with class '.checked'
var checkedShapes = $('.checked').map(function() {
return $(this).data('shape');
});
//for each checked shape, filter tr elements with more than 0 of that shape
$.each(checkedShapes, function( index, value ) {
var filteredBuckets = $(buckets).filter(function() {
return $(this).data(value) > "0";
});
//add .active class to those tr elements
$(filteredBuckets).addClass('active');
//get number of checked shapes and display in td.contents
//$('tr.active td.contents').text($(this).parent('tr').data(value));
$(filteredBuckets).each(function() {
var currentText = $($(this).find("td")[1]).text();
if (currentText.indexOf(":") === -1) {
$($(this).find("td")[1]).text(value + ": " + $(this).data(value));
} else {
$($(this).find("td")[1]).text($($(this).find("td")[1]).text() + ", " + value + ": " + $(this).data(value)); }
});
});
});
})();
Explanation: You need to iterate filteredBuckets
and set the desired text for each element. If it already has form data, we add new form data and, if there is no previous form data, we replace the old text with new form data.
source to share
$ (this) was referring to the $ .each loop, not the text, so I fixed it by iterating through the elements and then using $ (this):
(function() {
//store tr elements
var buckets = $('tr');
$('li').click(function () {
//toggle checked class OK
$(this).toggleClass('checked');
//reset classes and .contents text OK
$(buckets).removeClass('active');
$('td.contents').text('no shapes selected');
//map the shape data attribute for all li elements
//with class '.checked' OK
var checkedShapes = $('.checked').map(function() {
return $(this).data('shape');
});
//for each checked shape, filter tr elements with
//more than 0 of that shape OK
$.each(checkedShapes, function( index, value ) {
var filteredBuckets = $(buckets).filter(function() {
return $(this).data(value) > "0";
});
//add .active class to those tr elements OK
$(filteredBuckets).addClass('active');
//get number of checked shapes (i.e. "pyramids: 300, cubes: 50")
//and display in td.contents DOESN'T WORK
$('tr.active td.contents').each(function(){
$(this).text($(this).parent('tr').data(value));
});
});
});
})();
source to share