Identifying element not working

I want to append a class to all the <li class="jcalpro_events_event"> events so that I can use CSS to put a box around each event with a color that depends on the value of c[] (see JS code below). Any suggestions would be much appreciated.

Javascript code

jQuery(document).ready( function(){
  var c = document.getElementsByClassName('jcalpro_events_category'); <= WORKING
  for (i = 0; i < c.length; i++) {
    $('jcalpro_events_event').eq.addClass(c.textContent); <= NOT WORKING
    /* alert(c.textContent);*/ <=== WORKS WHEN NOT COMMENTED
   }
});

Code (markup):

HTML code

<div class="module title-on tabbeddark ">
<h3 class="moduletitle"><span class="first_word">Future Events (JCal Pro Events)</span></h3>
<div class="modulecontent">
<div class="jcalpro_events tabbeddark">
<ul class="jcalpro_events tabbeddark">
<li class="jcalpro_events_event">
<span class="jcalpro_events_link">
<a href="/bookings/mab-schedule-jcal/location/11-phoenix-kenilworth-school">
<img class="hasTooltip" title="Phoenix: Kenilworth School&lt;br&gt;1210 N 5th Ave" src="/media/jcalpro/images/events/icon-event-location.png" />
</a>
<a href="/bookings/mab-schedule-jcal/99-contra/149-phoenix-2nd-saturday" title="Phoenix 2nd Saturday Contra">Phoenix 2nd Saturday Contra</a>
</span>
<span class="jcalpro_events_date">Sat. Sep 10, 2016 7:00 pm</span>
<span class="jcalpro_events_category"><a href="/bookings/mab-schedule-jcal/99-contra">Contra</a></span>
<span class="jcalpro_events_description">Band: Clusterfolk</span>
</li>

... more <li>s
</ul>
</div>

HTML:

 

You're mixing regular javascript with jQuery (why?), and you're missing the class definition inside the for loop (missing . before jcalpro_events_event)

 

Thanks. I have now solved my problem. The final code is:

jQuery(document).ready( function(){
var l = document.getElementsByClassName("jcalpro_events_event");
var c = document.getElementsByClassName('jcalpro_events_category');
for (i = 0; i < c.length; i++) {
l.classList += ' ' + c.textContent;
} );

 

And... again... why are you mixing jQuery into that? If you're gonna load jQuery, it makes sense to actually use jQuery.
As I understand it, you're wanting to change the jcalpro_events_event class to something else (add another class) when the jcalpro_events_category is a specific value? Or contains a specific value, or something?

You should be able to do this without much else than a couple lines of jQuery - could you give an example of the value in jcalpro_events_category which should trigger a change? And maybe also provide what the change should look like?

Btw, the code you posted doesn't work - among other things, you're missing a ending bracket.

 

Thank you. There is no trigger event. The Joomla module produces the code and I want to add a color-coded border around each <li> element in the module output with the color depending on the text of the category <span> for that <li>. (There are no IDs in the module output.)

As I see it, I have to have a list of the relevant <li> elements and a list of the category <span> texts. I then have to assign the extra class to each of the <li> elements so that the CSS can pick this up and render the border color accordingly. I am using jQuery because it is already loaded and because I could get it to work. I would be happy to use anything that worked!

 

Then go through each jcalpro_events_category, match the text and assign css to the parent li element?

 
$('.jcalpro_events_category').each(function() {
  if ($(this).text() == 'whatever') {
    $(this).parents('li').css({'border':'1px solid red'});
  } 
}) 

Code (markup):