Quick Tip: Dissecting jQuery – Text
videos

Quick Tip: Dissecting jQuery – Text

on Sep 28th 2010 with 29 comments
Tutorial Details
  • Topic: jQuery Source Code
  • Estimated Difficulty: Intermediate
  • Format: 7 Minute Screencast
Download Source Files

In this latest episode of “Dissecting jQuery,” we’ll discuss the text() method, as well as a new feature, as of jQuery 1.4, that you may not be aware of yet.

Premium Members: Download this Video ( Must be logged in)

Subscribe to our YouTube page to watch all of the video tutorials!

jQuery Source for the text Method

text: function( text ) {
		if ( jQuery.isFunction(text) ) {
			return this.each(function(i) {
				var self = jQuery(this);
				self.text( text.call(this, i, self.text()) );
			});
		}

		if ( typeof text !== "object" && text !== undefined ) {
			return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
		}

		return jQuery.text( this );
	}

Keep in mind that the ability to pass a function to the text() method is only available, via the user of version 1.4 or higher. But that’s no problem; and if you’re still using 1.3, you should really stop! :)

Other Episodes in the “Dissecting jQuery” Series

  1. Filters
  2. Grep

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Shadow

    First…

    or am I second…or third

    lol.

    • Avinash

      This doesn’t make any sense, please change your attitude.

      • Edu

        lol.. change you attitude. <<<< pure hilarity!!!

  • Martin Førre

    The ownerDocument property is used to access the parent document from a script running inside an iframe… I think?

    • http://www.wdonline.com Jeremy

      ownerDocument gets the Document object that contains the node. So, any document–not just one in an iframe, frameset, or window. It could be from a document from an XHR’s responseXML (usually an HTML DOM document), and assuming jQuery supports it (I don’t see why it wouldn’t), an XML DOM document.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Yeah – that makes sense.

  • http://www.jQuerios.com jQuerios

    Really enjoy these quick tips, keep them coming Jeffery!

  • http://jeroenverfallie.com Jeroen

    Thanks for the knowledge once again,
    I didn’t see this before, it’s pretty useful,

    I can already start exploring my codes and doing it this clean way.

    The cam is something new :P Nice to see the painting on the back – your avatar

  • http://jacobdubail.com Jacob

    Awesome. Love these quick tips. This one got me thinking about all the other ‘simple’ methods that we all love and use on a daily basis. addClass() looks like it works exactly the same way. For example:

    $(‘#nav’)
    .find(‘li’)
    .addClass(function(index) {
    return ‘nav’ + index;
    });

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yep!

  • http://poetro.hu/ Peter Galiba

    this[0] && this[0].ownerDocument || document
    is used, in case jQuery is initialized in a different document then the object it is manipulating. Say, we create an iframe or a new popped up window with jQuery, and we want to write some content to it, and manipulate that with jQuery. In that case the iframe’s / windows document will be different then what jQuery’s document is, so it can grab the document if it exists.

    • Leigh Kaszick

      Whoops, had written my response but didn’t submit it (got distracted by work) and you must have beaten me to it :p

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Ah – Yeah, I later figured that it had to be related to potential iframe issues.

      Thanks, Peter! Great explanation.

  • Proxi

    I’m confused by how you can pass an “index” argument and magically it knows the index?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s not magic. :) The jQuery method passes those values for your use.

      • http://www.totalmedial.de Proxi

        I think Proxi is confused why index and value are argument 2 and 3 in the jquery-source, but argument 1 and 2 in the own script.

        So, it’s because of the way javascript do inheritance i think. The this-operator do not count as argument cause javascript needs it is for references to … ah whatever … can’t remember exacly – the inheritance-chain.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Oh I see. It’s because, within the jQuery source:

        text.call(this, i, self.text())

        The first parameter, this, specifies what the function should use as the this context. Then, the parameters after that are the arguments to be passed.

        You could also use apply; the only difference is that the arguments are passed as a single array.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Without explicitly setting this, the function would use the window as this — which is of very little help.

    • Proxi

      Oh ok, i missed the .call part. Those are the only two things you can use though correct (Index and the text)?

  • Leigh Kaszick

    Can’t work out the ownerDocument property either, except for maybe it is to get the correct owner document of the node (so if it is inside an iframe or something) and then defaults to document if the property isn’t available.

    Next jquery dissect – the $ function and creating the abstract jquery object?

  • erminio ottone

    wtf my girlfrend said you’re cute :/

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Probably just a moment of temporary insanity on her part.

  • Nasi

    Great tutorials! Thanks, but I have a question. What’s the right social addon on firefox?

  • http://www.aediscreative.com Christopher

    great to see a face with the video.. when do we get a rocken guitar solo with our quick tips?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      hehe – hopefully never. :)

  • http://tj.abderrahmane.com Abderrahmane TJ

    always liked the way you simplify thing, but this time i like the fact that there is a face on Jeffrey Way’s name :D

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yeah – I haven’t decided yet whether to keep that. I guess it helps to make things a bit more personable. :)

  • Cusco

    LOL first time to see Jeffrey Way’s face in video~

    Could you pls do a jQuery PHP JSON encode tutorial? I need it much XD

  • http://dejoe.tumblr.com Joe

    Jeff,

    A great one! Had a question though? Dont you think, it is a best practice to first form the string and the add it to the ul rather than changing the text of li. Like text changes and insertions are costly imho.

    I am not sure if we would have practical use for this. Do you think of some?