javascript - Getting an element by its CSS class name starting with a dot -


i had rename css class used start # sign dot handled extjs framework properly.

that jquery script used work fine until made change, whines cannot find element.

i'm not used jquery, question is supposed work?

$('.x-panel-body-cssmenu li.has-sub>a').on('click', function(){      //some code errors out because .x-panel-body-cssmenu can't found apparently...  });

this html in question:

<div class="x-panel x-border-item x-box-item x-panel-cssmenu" style="height: 441px; right: auto; left: 0px; top: 100px; margin: 0px; width: 200px;" id="navigationmenu-1011">     <div id="navigationmenu-1011-body" class="x-panel-body x-panel-body-cssmenu x-layout-fit x-panel-body-cssmenu" style="height: 441px; left: 0px; top: 0px; width: 200px;">                     <ul>             <li class="active"><a href="#"><span>home</span></a></li>             <li class="has-sub"><a href="#"><span>eligibility list</span></a>                 <ul>                     <li><a href="#"><span>view/manage list</span></a></li>                     <li><a href="#"><span>add employee</span></a></li>                 </ul>             </li>             <li><a href="#"><span>cases</span></a></li>             <li class="last"><a href="#"><span>documents</span></a></li>         </ul>     </div> </div>

and css (.x-panel-body-cssmenu used called #cssmenu:

.x-panel-body-cssmenu, .x-panel-body-cssmenu ul, .x-panel-body-cssmenu ul li, .x-panel-body-cssmenu ul li {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } .x-panel-body-cssmenu {   width: 200px;   font-family: helvetica, arial, sans-serif;   color: #ffffff;   float: left; } .x-panel-body-cssmenu ul ul {   display: none; } .align-right {   float: right; } .x-panel-body-cssmenu > ul > li > {   padding: 15px 20px;   border-left: 1px solid #1682ba;   border-right: 1px solid #1682ba;   border-top: 1px solid #1682ba;   cursor: pointer;   z-index: 2;   font-size: 14px;   font-weight: bold;   text-decoration: none;   color: #ffffff;   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);   background: #36aae7;   background: -webkit-linear-gradient(#36aae7, #1fa0e4);   background: -moz-linear-gradient(#36aae7, #1fa0e4);   background: -o-linear-gradient(#36aae7, #1fa0e4);   background: -ms-linear-gradient(#36aae7, #1fa0e4);   background: linear-gradient(#36aae7, #1fa0e4);   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); } .x-panel-body-cssmenu > ul > li > a:hover, .x-panel-body-cssmenu > ul > li.active > a, .x-panel-body-cssmenu > ul > li.open > {   color: #eeeeee;   background: #1fa0e4;   background: -webkit-linear-gradient(#1fa0e4, #1992d1);   background: -moz-linear-gradient(#1fa0e4, #1992d1);   background: -o-linear-gradient(#1fa0e4, #1992d1);   background: -ms-linear-gradient(#1fa0e4, #1992d1);   background: linear-gradient(#1fa0e4, #1992d1); } .x-panel-body-cssmenu > ul > li.open > {   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);   border-bottom: 1px solid #1682ba; } .x-panel-body-cssmenu > ul > li:last-child > a, .x-panel-body-cssmenu > ul > li.last > {   border-bottom: 1px solid #1682ba; } .holder {   width: 0;   height: 0;   position: absolute;   top: 0;   right: 0; } .holder::after, .holder::before {   display: block;   position: absolute;   content: '';   width: 6px;   height: 6px;   right: 20px;   z-index: 10;   -webkit-transform: rotate(-135deg);   -moz-transform: rotate(-135deg);   -ms-transform: rotate(-135deg);   -o-transform: rotate(-135deg);   transform: rotate(-135deg); } .holder::after {   top: 17px;   border-top: 2px solid #ffffff;   border-left: 2px solid #ffffff; } .x-panel-body-cssmenu > ul > li > a:hover > span::after, .x-panel-body-cssmenu > ul > li.active > > span::after, .x-panel-body-cssmenu > ul > li.open > > span::after {   border-color: #eeeeee; } .holder::before {   top: 18px;   border-top: 2px solid;   border-left: 2px solid;   border-top-color: inherit;   border-left-color: inherit; } .x-panel-body-cssmenu ul ul li {   cursor: pointer;   border-bottom: 1px solid #32373e;   border-left: 1px solid #32373e;   border-right: 1px solid #32373e;   padding: 10px 20px;   z-index: 1;   text-decoration: none;   font-size: 13px;   color: #eeeeee;   background: #49505a;   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .x-panel-body-cssmenu ul ul li:hover > a, .x-panel-body-cssmenu ul ul li.open > a, .x-panel-body-cssmenu ul ul li.active > {   background: #424852;   color: #ffffff; } .x-panel-body-cssmenu ul ul li:first-child > {   box-shadow: none; } .x-panel-body-cssmenu ul ul ul li:first-child > {   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .x-panel-body-cssmenu ul ul ul li {   padding-left: 30px; } .x-panel-body-cssmenu > ul > li > ul > li:last-child > a, .x-panel-body-cssmenu > ul > li > ul > li.last > {   border-bottom: 0; } .x-panel-body-cssmenu > ul > li > ul > li.open:last-child > a, .x-panel-body-cssmenu > ul > li > ul > li.last.open > {   border-bottom: 1px solid #32373e; } .x-panel-body-cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > {   border-bottom: 0; } .x-panel-body-cssmenu ul ul li.has-sub > a::after {   display: block;   position: absolute;   content: '';   width: 5px;   height: 5px;   right: 20px;   z-index: 10;   top: 11.5px;   border-top: 2px solid #eeeeee;   border-left: 2px solid #eeeeee;   -webkit-transform: rotate(-135deg);   -moz-transform: rotate(-135deg);   -ms-transform: rotate(-135deg);   -o-transform: rotate(-135deg);   transform: rotate(-135deg); } .x-panel-body-cssmenu ul ul li.active > a::after, .x-panel-body-cssmenu ul ul li.open > a::after, .x-panel-body-cssmenu ul ul li > a:hover::after {   border-color: #ffffff; }

i tried escaping dot, no dot, using pound sign anyways, no go.

any ideas ?

nb: answers original question. question has been since edited show code there doesn't appear problem @ all.

in general, should avoid using special characters in class names @ all. more trouble worth.

however, if stuck class name containing special character, can escape it.

you have additional problem need prefix class name . in selector indicate using class selector:

in selector:

.\.x-panel-body-cssmenu

note since putting selector in javascript string literal, , \ special character there, need escape \

".\\.x-panel-body-cssmenu"

nb: there no such thing css class. html has classes, css has class selectors.


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more