CODEWITHSUNDEEP
javascriptjquerystringunicode
SventoryMang
SventoryMang

Reputation: 10479

Jquery, check if charAt() is equal to a unicode character?

I've got a collapsible link which has the unicode arrow on it

►This is a collapsible link

And when someone clicks on it I want it to be turned into the down arrow ▼. However I am having trouble figuring out how to parse to replace this character.

Here is my code:

function CollapsibleContainerTitleClickApp(){
     $(".collapsibleContainerContent.app", $(this).parent()).slideToggle();
     alert($(this).text().trim().charAt(0));
     if ($(this).text.trim().charAt(0) == "\u25B8"{
        alert("inside the if statement");
        $(this).text($(this).text().replace("\u25B8", "\u25BE"));
     }else{
        $(this).text($(this).text().replace("\u25BE", "\u25B8"));
}

Now the first alert always pops up as the actual arrow (►) and viewing the source also has the actual arrow. How can I see if the first character is one arrow, and if so replace it with the other arrow? The second alert statement never fires so it's never passing the condition of the if.

Upvotes: 3

Views: 18002

Answers (3)

fragmentedreality
fragmentedreality

Reputation: 1317

You can solve this with css and jQuery, too:

CSS:

.collapsible_link:before { content: "\25BC"; }
.collapsed_link:before { content: "\25BA"; }

jQuery:

$('#link').click(function(o) {
   $(o).toggleClass('collapsible_link collapsed_link');
});

Upvotes: 2

Lee
Lee

Reputation: 13542

charCodeAt(index) returns the integer unicode value of the character at the specified index. This is often the easiest way to test individual char values -- especially when they're non-printable, or special in some other way. (docs at w3schools)

Also... be sure you're comparing the correct unicode values. "\u25B8" is the "small right arrow" (▸) -- but the arrow you showed in your example is the "large right arrow", which is "\u25BA" (►)

so... a simple example using charCodeAt() and the correct unicode value:

var s = "►This is a collapsible link";
if(s.charCodeAt(0) === 0x25BA) {
   alert( "true!");
}

Upvotes: 2

Jacob Relkin
Jacob Relkin

Reputation: 163228

You have multiple errors in your if statement, this is why that branch is never hit.

if ($(this).text.trim().charAt(0) == "\u25B8"{

You forgot the closing ) of the if statement.

Also, you're not invoking the text() method, you're trying to access it as a member, which it isn't.

Your code should look like this:

if ($(this).text().trim().charAt(0) == "\u25B8") {

Upvotes: 8

Related Questions