?
Solved

jQuery selector syntax not correct?

Posted on 2011-09-21
14
Medium Priority
?
492 Views
Last Modified: 2012-05-12
$('table[id*="ShoppingShippingMethods1"]').css("background-color", "blue");

Does not seem to be doing anything.

NOTE:  I routinely do something nonsensical like change the border color or background color in order to test my jQuery selectors.  Is there a better way to tell if my selector syntax is working and is correct?




Here is the markup:

 <div class="shipselwrapperclass">
    <div id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_ShippingSelection">
	
<div style="width: 300px;" id="item">
<div>
		<table cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping" style="height:20px;width:300px;border-collapse:collapse;">
			<tr>
				<th align="left" scope="col">Select Shipping Method</th><th align="right" scope="col">Amount</th><th align="right" scope="col">&nbsp;</th>

			</tr><tr onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$0')">
				<td>
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl02_lblDisplay">USPS Media Mail</span>
</td><td align="right" style="width:0px;">
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl02_lblAmount">$5.95</span>
</td><td align="right" style="width:0px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$0')"></a></td>
			</tr><tr onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$1')">
				<td>
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl03_lblDisplay">USPS Express MAil</span>
</td><td align="right" style="width:0px;">

<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl03_lblAmount">$8.45</span>
</td><td align="right" style="width:0px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$1')"></a></td>
			</tr><tr onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$2')">
				<td>
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl04_lblDisplay">FedEx Second Day Air</span>
</td><td align="right" style="width:0px;">
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl04_lblAmount">$12.00</span>
</td><td align="right" style="width:0px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$2')"></a></td>
			</tr><tr onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$3')">
				<td>

<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl05_lblDisplay">FedEx Overnight</span>
</td><td align="right" style="width:0px;">
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl05_lblAmount">$20.00</span>
</td><td align="right" style="width:0px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$3')"></a></td>
			</tr><tr onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$4')">
				<td>
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl06_lblDisplay">Pick-up Instore</span>
</td><td align="right" style="width:0px;">
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl06_lblAmount">$0.00</span>
</td><td align="right" style="width:0px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$4')"></a></td>
			</tr>

		</table>
	</div>
</div>

Open in new window

0
Comment
Question by:Tom Knowlton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 2
14 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575335
try something like this

$('table).each(function(){
  var id = $(this).attr("id");
  if (id.indexOf("ShoppingShippingMethods1") != -1)
  {
     $(this).css("background-color",  "blue");
  }
});

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575340
were you calling that jquery code in document.ready?
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36575372
>>>were you calling that jquery code in document.ready?

Yes.



Not sure about this:

$('table).each(function(){
  var id = $(this).attr("id");
  if (id.indexOf("ShoppingShippingMethods1") != -1)
  {
     $(this).css("background-color",  "blue");
  }
});



I may have more than one table on the page, but only one particular table I want to modify.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575399
it will modify only that table, whose id contains 'ShoppingShippingMethods1'
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36575405
It's not working, sorry
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36575427
what about : $('table[id*="ShoppingShippingMethods1"]').css("background", "blue");
test page : http://jsfiddle.net/2m74p/1/
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575449
this code works

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$('table').each(function(){
			  var id = $(this).attr("id");
			  if (id.indexOf("change") != -1)
			  {
				 $(this).css("background-color",  "blue");
			  }
			});
		});
	</script>
</HEAD>

<BODY>
<table id="one_change1">
    <tr>
        <td>1</td>
        <td>One</td>
        <td>yes</td>
    </tr>
    <tr>
        <td>1</td>
        <td>One</td>
        <td>yes</td>
    </tr>
</table>


<table id="one_Change1">
    <tr>
        <td>1</td>
        <td>One</td>
        <td>yes</td>
    </tr>
    <tr>
        <td>1</td>
        <td>One</td>
        <td>yes</td>
    </tr>
</table>

</BODY>
</HTML>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 36575469
yes it work with "background-color"
http://jsfiddle.net/2m74p/2/
0
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 1000 total points
ID: 36575507
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36575776
Finally got this working:

  $('table[id*="ShoppingShippingMethods1"]').css("background-color", "blue");


does jQuery sometimes have trouble running?  It seemed to take a few refreshes and then it began working.
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 36575791
thx


more questions coming soon, keep your eyes peeled.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36578760
As the great one says: just bring it!!! :)
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36580944
Oh, it is so broughten!!
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36580947
brung...bringed....
0

Featured Post

Understanding Linux Permissions

Linux for beginners: How to view the permissions associated with files and directories and also how you can change them.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question