1

There are quite a number of jQuery methods that accept functions instead of values as parameters. .append() is an example of that. Instead of writing:

something.append( '<div></div>' );

one might write:

something.append( () => '<div></div>' );

That's... nice. But I'm wrecking my mind trying to come up with a use case for this. Why would I want to do that? Does this enable something that would not otherwise be possible? Or does it at least drastically shorten or beautify certain bits of code?

Just to quickly add the purpose of this question: I'm writing a JS library that doesn't operate on HTML but still might as well have an API that's similar to jQuery's. So now I'm trying to figure out what to copy and what not to.

EDIT:

One use case is to index elements based on their position in the matched set. (Thanks to @Satpal and @JasonSmith!)

A second use case is to conditionally add content - as long as there's no condition that requires not to add content. (Thanks again to @JasonSmith)

Are there other practical use-cases? Does this get used often?

Improve this question

2 Answers 2

Reset to default
3

In .append(fn) method. With in the function, this refers to the current element in the set. which lets us to manipulate the content to be appended.

Here is an example.

$('p').append(function(){
  return $(this).index();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<p></p>
<p></p>
<p></p>

OR

$('p').append(function(){
  return $(this).next('a');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p><a href="#">1</a>
<p></p><a href="#">2</a>
<p></p><a href="#">3</a>
<p></p><a href="#">4</a>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

How is this superior to $('p').each( function (index) { $(this).text(index); } );?
@PeterCoester If the action the developer wants to do logically involves appending something, something.append(dynamicContentGenerator) is more readable/semantically cleaner than something.each(generateAndAppendSomeContent)
@PeterCoester, Here we are not comparing one method over other. I have just presented a use case. obviously each() can be used
Okay, I get it. Thanks @Satpal and you too @JasonSmith! I've updated the OP.
0

@Satpal provided an excellent example of one use case using the append function in jQuery. In more general terms, however, I look at it this way: if you are creating an API method capable of operating on a set of objects, then accepting a function as an argument for that API method allows the user to vary the behavior of the API according to the unique properties of each object in the set. For example, suppose we have a collection of elements like this:

<li>100</li>
<li>1000</li>
<li>150</li>

Suppose also that we have a hypothetical API method called myAPI.colorize(). If the colorize function accepts only a string, then all items in the set will be made the same color

mySet.colorize('red');

If, on the other hand the colorize method also accepts a function as an argument, then the developer can dynamically colorize without being required to break the set into constituent parts, like this:

mySet.colorize(function(currentElement) {
    return currentElement.text == '1000' ? 'green' : 'red';
});

Or, if our hypothetical API binds the this reference the way jQuery does, then we could make our code even simpler:

mySet.colorize(function() {
    return this.text == '1000' ? 'green' : 'red';
});

Of course this is a somewhat contrived example, but I believe it illustrates the design point in question without getting too stuck on a specific feature of jQuery.

Improve this answer

3 Comments

Yes, I understand that providing a function instead of a value makes it possible to conditionally add content. But what if the conditional check suggests not to modify the element at all? That's not a problem when using .each() but it quickly devolves into hacks when using .append().
Since you are writing an API, I attempted to answer your question in general terms without getting bogged down in the specifics of jQuery .append(). I agree, there are instances where using .each() works better than passing a function into .append(). But conversely, I believe there are also instances where the function-as-argument model is cleaner.
Well. It's certainly true that throwing in a few - strictly speaking - redundant features is a good thing if it allows users to express their intent better. No arguments there. At some point, however, that turns into clutter. I'm worried about bloating both documentation and code with features of limited usefulness. You've been very helpful but I'm still not certain whether this is one of those cases or not...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.