Q:

Change bottom border of div based on the text content of another div

I have a problem I hope someone can help me with.  I need to change the bottom border of a div based on the text contained in another div. 
<ul id="featured_music">
<li style="width: 250px;">
    <div class="music_carousel_item_wrapper"> 
  <div class="music_carousel_item_content">
      <div class="music_carousel_item_image">
                    <div class="field field-name-field-live-show-preview field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><a href="http://xxxxx.com/"><img typeof="foaf:Image" src="http://xxxxx.com/showpreviewtest4.png" width="250" height="187" alt=""></a></div></div></div>       </div>
    </div>
  <div class="music_carousel_item_hover" style="opacity: 0;">

                         <p>Drum and Bass</p> 
        <p><a href="http://xxxxx.com/showpreviewtest4.png" rel="lightbox" title="04.02.2014 - Transcendent Tuesdays"><i class="general foundicon-search"></i></a><a href="/show/drum-and-bass/04022014-transcendent-tuesdays"> <i class="general foundicon-paper-clip"></i></a></p>
                </div> 
</div>  
<div class="music_carousel_item_description">
<h3><a href="/show/drum-and-bass/04022014-transcendent-tuesdays">04.02.2014 - Transcendent Tuesdays</a></h3>
</div>  
</li>

This above markup is a carousel of items, for ease I have only included one item.  For this code I want to change the bottom border of the "music_carousel_item_description" div to a specific colour depending on the value of the "music_carousel_item_hover"
For this particular example the text is "Drum and Bass" and the bottom border should be pink.  If the text said "House", the bottom border should be blue. 

A:

Find the music_carousel_item_hover elements using $(). 
Loop through them with each. 
Check their content by using text. 
Find the related music_carousel_item_description by using closest to find the appropriate container (I think it might be an li in your case, can't tell for sure) then find to find the music_carousel_item_description. 
Finally, use css on that element to set its bottom border. 

Rough example: Live copy
<! DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul id="featured_music">
<li style="width: 250px;">
    <div class="music_carousel_item_wrapper"> 
  <div class="music_carousel_item_content">
      <div class="music_carousel_item_image">
                    <div class="field field-name-field-live-show-preview field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><a href="http://xxxxx.com/"><img typeof="foaf:Image" src="http://xxxxx.com/showpreviewtest4.png" width="250" height="187" alt=""></a></div></div></div>       </div>
    </div>
  <div class="music_carousel_item_hover">

                         <p>Drum and Bass</p> 
        <p><a href="http://xxxxx.com/showpreviewtest4.png" rel="lightbox" title="04.02.2014 - Transcendent Tuesdays"><i class="general foundicon-search"></i></a><a href="/show/drum-and-bass/04022014-transcendent-tuesdays"> <i class="general foundicon-paper-clip"></i></a></p>
                </div> 
</div>  
<div class="music_carousel_item_description">
<h3><a href="/show/drum-and-bass/04022014-transcendent-tuesdays">04.02.2014 - Transcendent Tuesdays</a></h3>
</div>  
</li>
  </ul>
  <script>
    (function() {
      "use strict";

      // 1.Find the music_carousel_item_hover elements using $(). 
      // 2.  Loop through them with each. 
      $(".music_carousel_item_hover").each(function() {
        // Each DOM element in the loop is `this`, to get
        // a jQuery wrapper we use `$()` again
        // 3.  Check their content by using text. 
        var $el = $(this);
        var color;
        var content = $el.text().toLowerCase();
        if (content.indexOf("drum and bass") ! == -1) {
          color = "blue";
        }
        else if (content.indexOf("house") ! == -1) {
          color = "pink";
        }

        if (color) {
          // 4.  Find the related music_carousel_item_description
          // by using closest to find the appropriate container
          // (I think it might be an li in your case, can't tell
          // for sure) then find to find the
          // music_carousel_item_description. 
          // 5.  Finally, use css on that element to set its bottom border. 
          $el.closest('li')
            .find('.music_carousel_item_hover')
            .css("border-bottom", "1px solid " + color);
        }
      });
    })();
  </script>
</body>
</html>

