select class starting with jquery

Question

html....

first case

<ul>
<li class="one two"></li>
<li class="nav three active"></li>
<li class="four nav4"></li>
</ul>

second case

<ul>
    <li class="one two"></li>
    <li class="nav three"></li>
    <li class="four nav4 active"></li>
    </ul>

Trying to select class starting with nav like this but seems wrong statement:

var $myclass = $('ul .active');
var $thisclass = $myclass.attr('[class^="nav"]'); // this line

Are you trying to get all elements with class "active" and also with class name starting with "nav"? — Purnil Soni, Sep 12 '13 at 06:34
He's trying to select all class names that begin with `nav`. @C-Link See my answer below if this is your intent. — hitautodestruct, Sep 12 '13 at 06:36
@PurnilSoni You can see in my question I have set the variable for .active and then select class starting with nav..... — Bhojendra Rauniyar, Sep 12 '13 at 06:36
@C-Link your html class does not start with `nav` it starts with `four ..` again, see my answer below. — hitautodestruct, Sep 12 '13 at 06:37

Praveen · Answer 1 · 2013-09-12T06:31:37.967

0

You can use .hasClass()

var $myclass = $('ul .active');
$myclass.hasClass('nav')

edited Sep 12 '13 at 06:31

answered Sep 12 '13 at 06:26

Praveen

55,303
33
133
164

.nav is assigned to `li` as is .active. How would find help here? – dc5 Sep 12 '13 at 06:28
@dc5 right then this will help OP `$myclass.hasClass('nav')` Thank you. – Praveen Sep 12 '13 at 06:30

score 0 · Answer 2 · answered Sep 12 '13 at 06:26

0

Use .has()

$myclass.has('li[class^="nav"]')

answered Sep 12 '13 at 06:26

Dipesh Parmar

27,090
8
61
90

score 0 · Accepted Answer · answered Sep 12 '13 at 06:27

0

$('li').filter(function(){ 
    $(this).attr('class').split(' ')[0] == 'nav'
})

answered Sep 12 '13 at 06:27

Tomzan

2,808
14
25

hitautodestruct · Answer 4 · 2013-09-12T06:45:59.907

0

Using the ^= operator will only select the nav if it's the first class in the class list:

<li class="nav4 .."></li>

You can include the *= operator to search for it in all the list:

var myClass = $('[class^="nav"], [class*=" nav"]');

Heres an example.

Side note: This is how most icon fonts use a single class icon-

edited Sep 12 '13 at 06:45

answered Sep 12 '13 at 06:30

hitautodestruct

20,081
13
69
93

@C-Link so use the `*=` operator.. [Check out this example](http://jsbin.com/ujivUfu/1/edit) – hitautodestruct Sep 12 '13 at 06:40

Purnil Soni · Answer 5 · 2013-09-12T07:13:56.823

0

You can use below single line of code to achieve your required result:

$('li.active*[class*="nav"]')

This will get you all those li elements, which:
1. have active as one of its class, AND
2. have any class in them which starts with nav (i.e. nav, nav4, nav<whatever>)

for demo please visit http://jsfiddle.net/purnil/dHRkS/2/

edited Sep 12 '13 at 07:13

answered Sep 12 '13 at 06:54

Purnil Soni

831
4
18

score 0 · Answer 6 · answered Sep 12 '13 at 07:24

0

You can use below jquery expression

$('ul').find('li[class*="nav"]').html('abc');

Please manipulate expression according to your requirement.

Also check out fiddle

answered Sep 12 '13 at 07:24

Chirag Vidani

2,519
18
26

score -1 · Answer 7 · answered Sep 12 '13 at 06:25

-1

you can directly select it using

$(".nav")

answered Sep 12 '13 at 06:25

Ganesh Pandhere

1,612
8
11

This wont work as there is no element with class="nav". What @C-Link is trying to achieve is to get all elements with class name starting with "nav". – Purnil Soni Sep 12 '13 at 06:38

select class starting with jquery

7 Answers7

Linked