Jquery Selecting an element in a div based on text in a span.

Question

The Markup:

<div class="day">
        <span>1</span>
        <div class="icon-shop icon-blank"><p class="event-details" id="shop-1"></p></div>
        <div class="icon-eat icon-blank"><p class="event-details" id="eat-1"></p></div>
        <div class="icon-fun icon-blank"><p class="event-details" id="fun-1"></p></div>
        <div class="icon-scoop icon-blank"><p class="event-details" id="scoop-1"></p></div>
</div>
<div class="day">
        <span>2</span>
        <div class="icon-shop icon-blank"><p class="event-details" id="shop-2"></p></div>
        <div class="icon-eat icon-blank"><p class="event-details" id="eat-2"></p></div>
        <div class="icon-fun icon-blank"><p class="event-details" id="fun-2"></p></div>
        <div class="icon-scoop icon-blank"><p class="event-details" id="scoop-2"></p></div>
</div>

This is for a calendar and I am pulling in event data.

An example: If an event is on day 2 in the shop category , I then need to remove class .icon-blank from:

<div class="icon-shop icon-blank"><p class="event-details" id="shop-2"></p></div>

needs to become

<div class="icon-shop"><p class="event-details" id="shop-2"></p></div>

This is what im trying to do: I have the event on day 2 in the shop category.

var cat = 'shop';
var day = '2';

    $(".day").find("span:contains('"  + day + "') > .icon-" + cat).removeClass('icon-blank');

The code above I am trying to select the proper day div(the day with a span with the text "2" and then select the div .icon-shop within that day. If that makes any sense at all lol. Thanks for your help!

Answer 1

Don't use :contains(), because 12 contains 2, too. Better write a small filter:

var cat = 'shop';
var day = '2';

$("div.day span").filter( function() { 
  return $.trim( $(this).text() ) == day;
}).parent("div").find("div.icon-"+cat).removeClass('icon-blank');