JQuery :: Selectors And Chaining - Alter Text In DIV
Aug 29, 2010
I haven't used jquery for quite a while and I'm trying to simply alter out the text in a div with an ID of "test" but I'm running into trouble.
Code:
var mytest = $("#test");
alert(mytest);
I'm sure it's because I've selected the div as a whole, but I've tried selecting the first child with no success.
I suppose I should first chain in a "p" selector, then select the first item, but I'm not quite sure how to do it. What I think is my closest attempt is as follows:
Code:
var mytest = $("#test").("p")[0];
alert(mytest);
I have a web site which creates printed output which will be printed out on A4 with a standard template that I use. Fortunately each output will (should?) fit on one page so I don't need to worry about the content munging the template. Now so far the approach I have used is to spin through a loop writing the content into a new div which is shown as a preview and which I then print. So far so good.
Now I want to generalise the templates so I can change them more easily. So instead of $('#printableblock').html(somefunction());I want to load a template from a file. That file would look something like;
I've written a function to change the font, this is working in IE but not in FF or Chrome. No errors come up in Firebug. Once this is working in both browsers I will change the function to gradually increase the size of the font to make it look as if the font is growing. This is why I haven't just assigned a class to the text. URL of the site with the script is [URL]
the following code works fine, but the span is NOT a child of the Li element. Instead it is a childof UL. If I remove the .data() from the chain, that SPAN is created as a child node, like it should be.
just a quick question about syntax.What's the difference between the following functions?
$("#menu li").hover( function(event) { if ($(this).is(".active")) return;
[code]...
If you notice, at the end of the first hover function, there is an excess (), whereas on the second, there isn't. They are both functional. I was just curious as to why this is added sometimes and other times not.
In pseudo code, here's what I'm trying to do with some text: shrinkText.changeText.EnlargeText. The jQuery I'm using for this: $('span#calendarNumber').animate({ color: '#999', fontSize: '12px' }, 500 ).html($('#calculatorSampleInPopup1').val()).animate({ color: '#900', fontSize: '40px' }, 2500, 'easeOutElastic' );
What happens visually upon triggering this is this: - HTML content changes - text shrinks - text enlarges I think what is happening is that the first animation is suppose to span 500 (miliseconds?) but jQuery doesn't pause for that, it just starts the animating and goes immediate to the second event which is to change the text. In otherwords, I think it's triggering correctly, it's just not producing the visual effect I want. Is the solution to put a pause of some sort between the first two events? If so, what's the proper method?
I've been programming in jQuery for some time now, and for the first time, I came across an issue where I am writing out the location of a TD with an ID="step" to get the innerHTML with html(). I receive a null value, but when I use td:first within the chain of elements, it works.Has anyone experienced this issue or have any idea why this is not working? I've tried other TDs with diffirent IDs within the same row, and the same null result happens.Is there a possible limitation to the numbe of IDs used within the chaining of the $() call?
I have just written some jQuery code that had to navigate to a parent sibling then 3rd child. My code was $(this).parent().next('ul').children('li').children('span').children('input').attr('checked', 'checked'); Is there any way to optimize this I thought this would work $(this).parent().next('ul').children('li span input').attr('checked', 'checked');
I've got a div "main" that gets it's width changed via state chart. Now, in main I've got a div "item_title" that needs to change in respect to the width of "main" -90px because I have a fixed width 90px div also in "main". The code I have isn't sizing at all, like the width isn't being applied. In the css I don't have a width declared to the "item_title" to make sure nothing is interfering.
I can access the drop-down value(s) the visitor has chosen by $("#ak option:selected").each(function () {... but now I want to force the drop-down list to be selected to a particular default value of my choosing ... how would I do this?I did try:
$("#ak option:selected").each( function () { $(this).text('-> Choose Accessory kind');
I'm new in jQuery. I have to alter randomly the order of the td elements of a table. My initial idea is: - Clone the original table (I can't modify it). - Disorder randomly the elements of the cloned table. - Show the cloned table.
The actual code is: <html> <head> <script src="[URL]"></script> <script type="text/javascript"> $(document).ready(function(){ }); </script></head> <body><script> $(document).ready(function(){ .....
We are working within a CMS and we have a dynamic text header that pulls into the top of the page. The problem is that there are certain titles that are too long and are breaking into other design elements. I'm thinking there should be a way to count the number of characters and then dynamically change the font-size of the header.
Writing a sortable list function. My <li> elements contain several items (headings, paragraphs etc) and I want to add a class to the headings when they've been sorted. I have this code in my sortable init:
I found that certain selectors work in all browsers except IE 8 and they need to modified. This selector pattern seem to work well in all browsers, including IE 8: jQuery("input[class='class_name'][type='text']") But this identical selector works in Firefox, Safari but not in IE 8: jQuery("input.class_name:text") In IE 8 it returns a "property not found" javascript runtime error. I don't know whether that the actual issue or if it is a side effect of some memory leak.
I'm trying to test if certain radio buttons are selected, but the name varies. My boss is considering changing the names to further isolate them breaking the script as it works now. I'm trying to figure out how to test the new case just like it works now. Here's a link to my pastebin
I have been struggling to find the right solution to validating a username in a form to make sure it is unique. I don't want to use Dreamweaver's validate username because I want the error to appear on the same page next to the form field as it does with the Spry Validation. I use Spry validation for all the fields but it doesn't check to make sure the username doesn't already exist. I was wondering if anyone knew the code I would need to add to SpryValidationTextField.js, SpryValidationTextField.css and the actual form page to make this happen.
