I am looking to add a unique bottom border style to <span> elements with the class "indent". The border should be a specific size based on the level of indentation, and have color variations for alternating levels.
The current code I am using attempts to achieve this:
if (maximum_parenthesis_count > SPAGHETTI.maximum_underline_so_far)
{
for(var outer = SPAGHETTI.maximum_underline_so_far; outer <= maximum_parenthesis_count; ++outer)
{
var identifier = '';
for(var inner = 0; inner < outer; ++inner)
{
if (identifier)
{
identifier += ' span.indent';
}
else
{
identifier = 'span.indent';
}
}
console.log('jQuery');
console.log(identifier);
console.log(outer + 'px solid black;');
jQuery(identifier).css('border-bottom', outer + 'px solid black;');
}
SPAGHETTI.maximum_underline_so_far = maximum_parenthesis_count;
}
While the Chrome console logs indicate that the code is running correctly, the nested span elements do not display the desired bottom borders. It seems like there might be an issue with the jQuery.css() call. Although I can achieve the desired result with static stylesheets, the goal here is to generate dynamic borders based on the depth of indentation.
When inspecting the page in Chrome's dev tools, it recognizes the nested classes but does not show any corresponding CSS rules for the bottom borders. Even though the console logs show the code execution, it appears that the border styling is not being applied as intended.
How can I adjust the code so that each level of indentation has a distinct bottom border style, such as a 1px border for outer span.indent and a 2px border for inner span.indent in this example?