Using .text() to select a class but having issues with spaces within the html

Question

$('li.' + $(this).text()).toggle(true);

This code is used to take from a subnav below.

<div class="subNav">
        <ul>
     <li class="button">sun protective clothing</li>
        </ul>
 </div>

These are products that will be visible.

<div class="sun-protective-clothing"></div>

you're want to pick all the .button li's and change their class? please specify what you're trying to accomplish — yoavmatchulsky
– yoavmatchulsky, Commented Jul 6, 2011 at 17:24
@Buildingbrick:Although there is merit that it's "easy to do" or a quick hack, but are you sure you want to go with this approach? A change in your content could render the page useless, or if someone edits the page without realizing that it's tied up to a CSS class by the same name. I suggest storing the class name as a data-* attribute: <li class="button" data-className="sun-protective-clothing">Sun Protective Clothing</li> and you could just say $('li.'+$(this).data('className')).toggle(true); You'll free up the coupling between the actual content and the class name — PhD
– PhD, Commented Jul 6, 2011 at 17:28
@Nupul: I absolutely agree with the data- attribute approach. — Xyan Ewing
– Xyan Ewing, Commented Jul 6, 2011 at 17:47

John Hartsock · Accepted Answer · 2011-07-06 17:22:19Z

2

You must use JavaScript's replace() function to replace all spaces with dashes. Note using replace(" ", "-") like this will only replace the first instance of a space in the string. you must use a RegEx with the global search to replace all instances; such as / /g

$('li.' + $(this).text().replace(/ /g, "-")).toggle(true);

answered Jul 6, 2011 at 17:22

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brenjt · Accepted Answer · 2011-07-06 17:20:56Z

0

you need to replace the spaces with dashes. Try

$('li.' + $(this).text().replace(/ /g, "-")).toggle(true);

answered Jul 6, 2011 at 17:20

brenjt

16.3k14 gold badges80 silver badges120 bronze badges

1 Comment

John Hartsock Over a year ago

This will only replace the first space. You must use a RegEx (Regular Expression).

jzilla · Accepted Answer · 2011-07-06 17:32:32Z

0

I would recommend no using the text inside the li and do something like this:

<div class="subNav">
    <ul>
 <li class="button" target="sun-protective-clothing">sun protective clothing</li>
    </ul>
</div>

and:

$('.' + $(this).attr("target")).toggle(true);

This way you can put whatever you want inside the li, and not have it affect your logic.

answered Jul 6, 2011 at 17:32

jzilla

1,70310 silver badges10 bronze badges

1 Comment

bfavaretto Over a year ago

or maybe rel instead of target? <li class="button" rel="sun-protective-clothing">sun protective clothing</li>, $('.' + $(this).attr("rel")).toggle(true);

Collectives™ on Stack Overflow

Using .text() to select a class but having issues with spaces within the html

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related