skip to Main Content

I have a bunch of events and each event has a list of speakers. The speakers roles are showing as custom classification in a ul>li format for each speaker. What I am trying to do is to alter their role names and remove the event title part from their tags. I need this logic to work for all events so I thought I can check the event Url and compare them against the tags and then remove event title part from the tags.

This is how event Urls will look like: /event-a, /event-b, /event-c, etc.

and this is how the tags are showing depending on the event:

<ul>
    <li><span>Event a co-chair</span></li>
    <li><span>Event a speaker</span></li>
    <li><span>Event a committee</span></li>
    <li><span>Event a chair</span></li>
</ul>

or:

<ul>
    <li><span>Event b co-chair</span></li>
    <li><span>Event b speaker</span></li>
    <li><span>Event b committee</span></li>
    <li><span>Event b chair</span></li>
</ul>

This is how I am getting the last segment of the Url and I also have a conditional that is checking if the tags are matching with the event Url:

pageUrl = window.location.href.replace(//$/, '');
var lastSeg = pageUrl.substr(pageUrl.lastIndexOf('/') + 1);
// loop
$('ul li').each(function () {
    var tagItemName = $(this).children('span').text();
    var tagItem = $(this).children('span').text().replace(/s+/g, '-').toLowerCase();

    if (tagItem.indexOf(lastSeg) >= 0) {
        $(this).addClass('matching-tag');
    }
});

How do I squeeze in my "find and partial-remove" logic in the above code? Can it be in the same if statement? I also have tagItemName which is the raw version of the tags without dashes and lowercasing.

What I am trying to achieve is this format in all events with the same code:

<ul>
 <li><span>co-chair</span></li>
 <li><span>speaker</span></li>
 <li><span>committee</span></li>
 <li><span>chair</span></li>
</ul>

2

Answers


  1. yes you could have it in the same if statement

    pageUrl = "www.mysite.com/Event-a"
    //window.location.href.replace(//$/, '');
    var lastSeg = pageUrl.substr(pageUrl.lastIndexOf('/') + 1);
    
    // loop
    $('ul li').each(function() {
      var tagItemName = $(this).children('span').text();
      if ($(this).children('span').text()
        .replace(/s+/g, '-').toLowerCase()
        .indexOf(lastSeg.toLowerCase()) >= 0) {
        $(this).text($(this).children('span').text().toLowerCase()
          .replace(lastSeg.replace('-', ' ').toLowerCase(), '')
          .trim().replace(/s+/g, '-'))
        $(this).addClass('matching-tag');
      }
    });
    .matching-tag {background-color: coral;}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul>
        <li><span>Event a co-chair</span></li>
        <li><span>Event a speaker</span></li>
        <li><span>Event a committee</span></li>
        <li><span>Event a chair</span></li>
    </ul>
    <ul>
        <li><span>Event b co-chair</span></li>
        <li><span>Event b speaker</span></li>
        <li><span>Event b committee</span></li>
        <li><span>Event b chair</span></li>
    </ul>

    I hope this helps

    Login or Signup to reply.
  2. update

    pageUrl = "www.mysite.com/Event-a"
    //window.location.href.replace(//$/, '');
    let lastSeg = pageUrl.substr(pageUrl.lastIndexOf('/') + 1);
    
    // loop
    $('ul li').each(function() {
      let tagItemName = $(this).children('span').text();
      if ($(this).children('span').text()
        .replace(/s+/g, '-').toLowerCase()
        .indexOf(lastSeg.toLowerCase()) >= 0) {
        $(this).text($(this).children('span').text().toLowerCase()
          .replace(lastSeg.replace('-', ' ').toLowerCase(), '')
          .trim())
        $(this).addClass('matching-tag');
      }
    })
    .matching-tag {background-color: coral;}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul>
        <li><span>Event a foo co-chair</span></li>
        <li><span>Event a bar speaker</span></li>
        <li><span>Event a moo committee</span></li>
        <li><span>Event a poo chair</span></li>
    </ul>
    <ul>
        <li><span>Event b foo co-chair</span></li>
        <li><span>Event b bar speaker</span></li>
        <li><span>Event b moo committee</span></li>
        <li><span>Event b poo chair</span></li>
    </ul>

    hopefully this is better

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search