Help with child selector

I need to achieve the following in JQuery please, but am struggling...


Within the table that has an ID called 'complevels'
Select all the text inputs that have an ID value ending with 'newlevel', but only the inputs with an empty value (e.g. blank)
Set the value of those text inputs to that contained in the 'level' variable

So far I have the following but it is failing to find the text inputs...

 
var level = '50';
// $("input[id$='newlevel']").val(level); // works

$("#complevels > input[id$='newlevel']").val(level); // fails

Open in new window

LVL 25
RouchieAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
StealthyDevConnect With a Mentor Commented:
Hi, I would like to add this:

$("#complevels").find("input[type='text'][id$='newlevel']").val(level);
0
 
Gurvinder Pal SinghCommented:
$("#complevels > input[type='text'][id$='newlevel'][value!='']").each(function(){
$(this).value(level);
});

0
 
RouchieAuthor Commented:
Hi gurvinder372

I get a javascript error:

     Warning: Unexpected token in attribute selector: '!'.  Dangling combinator.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Gurvinder Pal SinghConnect With a Mentor Commented:
what about?


$("#complevels > input[type='text'][id$='newlevel']").each(function(){
if( $(this).value() != null && $(this).value().length > 0 )
{
  $(this).value(level);
}
});

Open in new window

0
 
kadabaCommented:
It would be hierarchical in nature so..

<html>
	<head>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			var level="changed";
			$("#complevels > tbody > tr > td > input[id$='newlevel']").each(function(){
				if($(this).val() == '')
					$(this).val(level);
			});
		});
		</script>
		<style>
		.col{
			background-color:red;
		}		
		</style>
	</head>
	<body>
		<table id="complevels" border="1">
			<tr>
			<td>
				<input type="text" id="1_newlevel">
			</td>
			</tr>
			<tr>
			<td>
				<input type="text" id="2_newlevel" value="hello">
			</td>
			</tr>
			<tr>
			<td>
				<input type="text" id="check">
			</td>
			</tr>
			<tr>
			<td>
				<input type="text" id="4_newlevel" value="world">
			</td>
			</tr>
			<tr>
			<td>
				<input type="text" id="5_newlevel">
			</td>
			</tr>
		</table>
	</body>
</html>

Open in new window

0
 
RouchieAuthor Commented:
Your example works great, but I just cannot get this working inside my page.  When I press the button to fire the function, nothing happens - no errors, no alerts...

Does something need changing to put your function inside my existing function?
<script type="text/javascript">
function CopyLevels(startBox){
		var startboxid = '#' + startBox;
		var level = $(startboxid).val();
		if (level=='' || level==undefined || isNaN(level)) {
			window.alert('Please enter a valid number before pressing the Copy button!');
			return false;
		}
		$("#complevels > input[type='text'][id$='newlevel']").each(function(){
				window.alert('Hello');
				$(this).val(level);
		});
}
</script>

Open in new window

0
 
kadabaConnect With a Mentor Commented:
Rou,

This needs to be chaged:
$("#complevels > input[type='text'][id$='newlevel']")

> selector is used in hierarchical manner so if that is the table id then you should follow what i have mentioned in the example before.
0
 
Gurvinder Pal SinghCommented:
<< When I press the button to fire the function, nothing happens - no errors, no alerts...>>
So you call CopyLevels method at the onclick event of that button. Please put an alert directly after the level value is fetched from the id and let me know the result
0
 
RouchieAuthor Commented:
Fantastic!

Based on all your suggestions, I have successfully implemented the following solution...

$("#complevels").find("input[type='text'][id$='newlevel']").each(function(){
			if ($(this).val() == '') {
					$(this).val(level);
			}
		});

Open in new window

0
 
kadabaCommented:
Rou,
Thanks for the points.

Just a note:
The find selector is much slower then the direct child selectors (Though in milliseconds, find searches all the DOM elements under the root.)

Best,
kadaba
0
 
StealthyDevCommented:
Thanks for the points..

BTW..... Instead of the loop, you can use this also:
$("#complevels").find("input[type='text'][id$='newlevel'][value='']").val(level);

Regards.
0
 
kadabaCommented:
pandi,

I do not think it would work well with Mozilla, as it would look for the attribute value..

kadaba.
0
 
StealthyDevCommented:
@kadaba:

No, its working fine with firefox also.. Give a look at this:
<SCRIPT src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></SCRIPT>

<script>
	fill = function(){
		var level = '50';
		$("#complevels").find("input[type='text'][id$='newlevel'][value='']").val(level);
	}
</script>

<table id="complevels">
	<tr><td>
		<input id="testnewlevel" />
		<input id="test2newle1vel" />
		<input id="test3newlevel" />
		<input id="test4newlevel" />
	</td></tr>
	<tr><td>
		<input id="test1newle1vel" />
		<input id="test12newle1vel" />
		<input id="test13newlevel" />
		<input id="test14newlevel" />
	</td></tr>
</table>
<button onclick="fill()">fill</button>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.