JQuery Selector Start With

From CoderLearner
Jump to: navigation, search

Description

select elements that its attribute value start with a given string.

Syntax

Attribute Starts With Selector [name^="value"]

Example 1

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Select</title>
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $().ready(function() {
            $('body').find('a[class^="teacher"]').css('color','red');
         });
      </script>
   </head>
   <body> 
      <a href="#" class="teacher-evaluate">John</a><br/>
      <a href="#" class="student-evaluate">Christ</a><br/>
      <a href="#" class="student-evaluate">Bob</a><br/>
      <a href="#" class="student-evaluate">Weeks</a><br/>
   </body>
</html>

Try It

Example 2

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Select</title>
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $().ready(function() {
            $('body').find('a[class^="exam_3"]').css('color','red');
         });
      </script>
   </head>
   <body> 
      <a href="#" class="exam_3_quiz_ans_3">Test 1</a><br/>
      <a href="#" class="exam_4_quiz_ans_2">Test 1</a><br/>
      <a href="#" class="exam_3_quiz_ans_54">Test 1</a><br/>
      <a href="#" class="exam_5_quiz_ans_32">Test 1</a><br/>
      <a href="#" class="exam_5_quiz_ans_22">Test 1</a><br/>
      <a href="#" class="exam_3_quiz_ans_3">Test 1</a><br/>
      <a href="#" class="exam_2_quiz_ans_3">Test 1</a><br/>
      <a href="#" class="exam_1_quiz_ans_3">Test 1</a><br/>
      <a href="#" class="exam_5_quiz_ans_3">Test 1</a><br/>
      <a href="#" class="exam_6_quiz_ans_3">Test 1</a><br/>
      <a href="#" class="exam_7_quiz_ans_3">Test 1</a><br/>
      <a href="#" class="exam_1_quiz_ans_3">Test 1</a><br/>
      <a href="#" class="exam_4_quiz_ans_3">Test 1</a><br/>
   </body>
</html>

Try It