How to find all textarea and paragraphs to make a border using jQuery ?

Given a set of textareas, the task is to apply a border on each of them and subsequently add some paragraphs and then define a border on every paragraph using the jQuery library.

Approach 1: Using the click(), css() and add() methods in jQuery:

There are two textareas, two paragraphs, and one button defined in the following example. The button has apply-border class and has a click event listener attached to it using the click() method. On clicking the button, a border is applied on each of the textarea elements using the css() method. The first parameter being the property to set, which is a border in this case, and the second parameter is the value of this border property. 

Moreover, we chain the add() method with css() method to add all paragraphs to this jQuery object. Once again, we use the css() method to set a border for the paragraph elements, using the same procedure as discussed with the textarea elements.

Example: In this example, we are using the above explained-approach.

Output:

Approach 2: Using the bind(), css() and add() methods in jQuery.

This approach is quite similar to the previous approach but the key distinction is that the method used to attach the event listener to the button is the bind() method with two parameters, the first parameter being the “click“ event and the second parameter being the anonymous function with the same logic as the previous approach, instead of using the click() method.

Example: In this example, we are using the above explained-approach.

Output: