Develop Reference

Add a Class to some items depending on inner html

I'm working on a leaflet js map atm.
There are some items that I want to apply a class to, depending on their inner text. Seems as though two circles at a certain size just overlap. Adding some CSS in that case so they're no longer overlapping.
//function searches for all <text> elements within svg tags for the queryText
// and then appends them with the appendText
function addClasserino() {
let elements = document.querySelectorAll('map-marker marker-bg-condition'); // get all circle elements as a NodeList
elements.forEach(el => { // go through each text element
if (el.innerText < 10) { // if the innerHTML matches the query HTML then
elements.addClass('updated'); // add the class
}
})
}
document.addEventListener("DOMContentLoaded", function(){
//pass in the search text and the appending text as arguments
addClasserino();
});
This is what I got so far. Doesn't seem to be working.
.map-marker.marker-bg-condition needs to be moved across a bit. Got the CSS here:
.map-marker.marker-bg-condition.updated{
margin-top: -19px;
margin-left: -19px;
}
With Leaflet JS, the zoom level changes and items are updated accordingly. This of my map showing all details at the world view, and then breaking down to state as you zoom in.
The unexpected behavior is that the css isn't applying and where bubbles are overlapping is because of this. This is the original code but I can't change it and get it to work even with an if statement.
getMarkerHtml: function(count, color) {
var size = this.getMarkerSize(count);
var hsize = (size / 2) - 6;
var font = count < 1000 ? Math.ceil(size / 3) : Math.ceil(size / 4);
if(count < 100) {
font = font + 3;
}
var cluster_classes = [
'map-marker',
'marker-bg-' + (Filters.colors.profile === color ? 'profile' : 'condition')
];
if(this.zoomLevel !== 'zip') {
size = size * 1.5;
if(petMapFilters.colors.profile !== color) {
hsize = size / 2;
}
}
if(this.zoomLevel === 'zip') {
var cluster_styles = [
'margin-left: -' + hsize + 80 + 'px;', NOTE: I tried this to offset on zip zoom bit it's not working END OF NOTE
'margin-top: -' + hsize + 80 +'px;',
'width: ' + size + 'px;',
'height: ' + size + 'px;',
'font-size: ' + font + 'px;'
];
} else {
var cluster_styles = [
'margin-left: -' + hsize + 'px;',
'margin-top: -' + hsize + 'px;',
'width: ' + size + 'px;',
'height: ' + size + 'px;',
'font-size: ' + font + 'px;'
];};
var div_style = [
'line-height: ' + (size - (size * 0.3)) + 'px;'
];
count = this.formatCount(count);
return '<div class="' + cluster_classes.join(' ') + '" tabindex="0" style="' + cluster_styles.join(' ') + '"><div style="' + div_style.join(' ') + '">' + count + '</div></div>';
},
Please let me know what I am doing wrong here as I am not able to identify this myself.
The issue at hand:
Thanks.

Increment id value in jQuery selector

I have the following code:
$("#cc").on('hidden.bs.modal', function (e) {
$("#cc iframe").attr("src", $("#cc iframe").attr("src"));
});
I would like to apply that to 10 different divs in my markup (#cc-1, #cc-2, #cc-3, etc...).
I tried using a for loop so I don't have to rewrite the same code 10 times by doing the following:
for (var i = 1; i < 11; i++) {
$('"#cc-' + i + ' iframe"').on('hidden.bs.modal', function (e) {
$('"#cc-' + i + ' iframe"').attr("src", $('"#cc-' + i + 'iframe"').attr("src"));
});
}
The thing is, I don't know how to concatenate the variable i inside my jQuery selector with everything else.
Please note that I need to target the iframe inside every #cc- div. This is the part what I'm getting trouble with. When adding the iframe after the concatenation of the #cc- with the variable i I get a syntax error.
I hope I made myself clear. Any clues in what I'm doing wrong?

You should be able to concatenate a variable in a selector like you are doing, however you don't need to add quotations.
Change this:
$('"#cc-' + i + ' iframe"')
To this:
$('#cc-' + i + ' iframe')
Also you are forgetting to add a space infront of your iframe class.
Change this:
$('"#cc-' + i + 'iframe"')
To This:
$('#cc-' + i + ' iframe')
Complete Change:
for (var i = 1; i < 11; i++) {
$('#cc-' + i + ' iframe').on('hidden.bs.modal', function (e) {
$('#cc-' + i + ' iframe').attr("src", $('#cc-' + i + ' iframe').attr("src"));
});
}

for (var i = 1; i < 11; i++) {
var mydiv="#cc-"+i;
$("mydiv iframe").on('hidden.bs.modal', function (e) {
$('"#cc-' + i + ' iframe"').attr("src", $('"#cc-' + i + 'iframe"').attr("src"));
});
}

Same random color on multiple pair of divs

So, I have a code where I generate a random color on page load.
$(function() {
$(".stuff").each(function() {
var hue = 'rgb('
+ (Math.floor((256)*Math.random()) + 25) + ','
+ (Math.floor((256)*Math.random()) + 25) + ','
+ (Math.floor((256)*Math.random()) + 25) + ')';
$(this).css("background-color", hue);
});
});
The color applies to the div .stuff. This div .stuff, works as a button. When I click .stuff, a relating div opens, which I call .filling.
.filling is not displayed on page load. When I click .stuff, both .stuff and .filling is displayed.
I have several .stuff, relating to their each .filling, creating pairs, so to speak.
The html:
<div id="port1Btn" class="divClick stuff">
</div>
<div id="port1" class="filling">
<img src="img/hyper.png">
</div>
The #port1Btn and #port1 is for defining the content of each pair, connecting them to the right button. And the divClick is for a script that helps close a open .filling when a .stuff is clicked.
Here is the code for that, if needed:
$('.divClick').bind("click", showFilling);
function showFilling(event) {
event.preventDefault();
var amountOfPorts = 999;
var ports = "";
for (i=0;i<amountOfPorts;i++) {
ports += "#port" + (i+1) +",";
}
ports = ports.slice(0, -1);
$(ports).hide();
var clickDiv = "#" + event.currentTarget.id;
var targetDiv = clickDiv.replace('Btn','');
$(targetDiv).toggle(100);
};
So, what I want to do is to have .stuff and .filling have their same color for each pair, but at the same time, every pair should have a different, random color on page load.
Thank you for reading, hope it was not too long, if so, let me know for future posts.

You can use the next() function.
$(function() {
$(".stuff").each(function() {
var hue = 'rgb('
+ (Math.floor((256)*Math.random()) + 25) + ','
+ (Math.floor((256)*Math.random()) + 25) + ','
+ (Math.floor((256)*Math.random()) + 25) + ')';
$(this).css("background-color", hue);
$(this).next(".filling").css("background-color",hue);
});
});
Adding that line will set the next div in the DOM after '.stuff' with the '.filling' class to the same color.

Adding to variable

I am trying to add one to a variable, but is not working. Why is this?
var numElementsDisplay = "5";
$('.searchdropdown .element:nth-child(n+' + numElementsDisplay + 1 + ')').attr('style', $(this).attr('style') + '; ' + 'display: none !important');

You need to use () wrap wrap the numeric operation, else a string concatenation will be performed
var numElementsDisplay = "5";
$('.searchdropdown .element:nth-child(n+' + (+numElementsDisplay + 1) + ')').attr('style', $(this).attr('style') + '; ' + 'display: none !important');
Also don't know why you want to use !important, but if you want to append the display rule to the existing set of inlined rules you will have to use a callback, else this will not refer to the current element
$('.searchdropdown .element:nth-child(n+' + (+numElementsDisplay + 1) + ')').attr('style', function () {
//also will have to use a callback
return $(this).attr('style') + '; ' + 'display: none !important'
});
But if you wan tot use !important a better solution will be is to use a class like
$('.searchdropdown .element:nth-child(n+' + (+numElementsDisplay + 1) + ')').addClass('hidden');
then
.hidden {
display: none !important
}

Here you are:
$('.searchdropdown .element:nth-child(' + (Number(n) + Number(numElementsDisplay) + 1) + ')').attr(...)
I don't know what is the var n in this context.
Hope this helps.

You've assigned the string "5" to numElementsDisplay
change it to
var numElementsDisplay = 5;
and all will be fine

I am unclear as to whether you want numElementsDisplay to be an integer (ex. 5 + 1 = 6) or a string (numElementsDisplay + 1 =numElementsDisplay1). If you want the first case, then you need to do use:
parseInt(numElementsDisplay + 1) .
Otherwise you should probably have the 1 in quotes, as: (numElementsDisplay + "1").

JQuery: get a child as you append it

I am appending p tags to a div as I process a json request and would liek to style it according to what is in the request.
$(document).ready(function() {
function populatePage() {
var numberOfEntries = 0;
var total = 0;
var retrieveVal = "http://www.reddit.com/" + $("#addressBox").val() + ".json";
$("#redditbox").children().remove();
$.getJSON(retrieveVal, function (json) {
$.each(json.data.children, function () {
title = this.data.title;
url = this.data.url;
ups = this.data.ups;
downs = this.data.downs;
total += (ups - downs);
numberOfEntries += 1;
$("#redditbox").append("<p>" + ups + ":" + downs + " " + title + "<p>");
$("#redditbox :last-child").css('font-size', ups%20); //This is the line in question
});
$("#titlebox h1").append(total/numberOfEntries);
});
}
populatePage()
$(".button").click(function() {
populatePage();
});
});
Unfortunately things are not quite working out as planned. The styling at the line in question is applying to every child of the div, not just the one that happens to be appended at the time, so they all end up the same size, not sized dependent on their numbers.
how can I apply a style to the p tags as they are appended ot the div?
Edit: Thanks Fortes and Veggerby both worked, but i went with Fortes in the end because I did.

You can use JQuery's appendTo instead of append. For your example:
$("<p>" + ups + ":" + downs + " " + title + "<p>")
.css('font-size', ups%20)
.appendTo('#redditbox');
Here are the docs for appendTo: http://docs.jquery.com/Manipulation/appendTo

Replace:
$("#redditbox").append("<p>" + ups + ":" + downs + " " + title + "<p>");
with
var p = $("<p>" + ups + ":" + downs + " " + title + "<p>");
$("p", p).css('font-size', ups%20)
$("#redditbox").append(p);
Can probably be condensed even further.
Edit:
Condensed like:
$("#redditbox").append(
$("<p></p>").css('font-size', ups%20).append(ups + ":" + downs + " " + title + "")
);

Certain browsers/versions do not support the :last-child CSS selector. In that case they often ignore it and return all elements matching the remainder of the selector. This is possibly what you are seeing.
As usual IE is one such browser.
veggerby's approach should help you get around the need to use :last-child.