jQuery Javascript – Change text in multiple areas quickly using

hey guys welcome back to another quick

video here we have where we’re working

on jQuery and I have a scenario for you

and I’ve already plotted out

um a written note an HTML file here and

uh this is the scenario so the scenario

is uh we have a table within our body

section we already have jQuery loaded

all right we already have a ready

function ready and we’re going to do

some editing here soon but we have a

scenario where we have a table as you

can see here the table is here and we

have rows TR means rows and within the

ruse we have

cells right we have cells so I just have

string one string two string three Etc

and I have basically one two three four

rows

and each of these rows has three columns

one two three and what that looks like

is this okay so this is what it looks

like string one two three four five six

and the scenario is this

what if we wanted to change all of these

the text Within These tables Within

These uh these cells

how would we do this with jQuery

now there’s a few ways to do this

obviously there’s you know with

programming there’s always multiple ways

of doing this

but what we could initially see is that

all of the areas that we want to change

the text they are the T they have the TD

tag

so in theory

we could basically use this TD tag to

change all of the content for all of

these elements right so let’s call it an

element right we’ll call it TD or the

cell an element and let’s change this

dynamically

all with basically one line of code

so we already initialized the jQuery uh

ready function so we have a function

here

and what I’m about to do is I’m going to

change all of the text within this

to something that I want okay so the

easiest way and this is not necessarily

the recommended way I’m just showing you

how it is uh we’ll talk about why this

could be a problem and how we could go

about fixing this problem as well is uh

like this so we could open up our dollar

sign

we could choose to select using using

the selector in this case the selector

would be TD without the dot or the

number sign because in this case it’s an

actual tag so with a tag when you’re

pointing to a tag you don’t need to put

anything in front of it you just put in

the the tag itself with all the arrows

and then inside there you could do HTML

and then inside there we could see

you know hello okay

and this should in theory this should in

theory

do something wonderful let’s see we’re

going to save it we’re going to run it

back

okay as you can see

all of these change to hello

okay which is awesome right

and you may be wondering well why would

you ever want to do something like this

well firstly let’s say you were you know

setting up uh

let’s say that you were you do you were

building a social platform page and

let’s say it’s on the profile page let’s

see that this was the profile page and

in multiple spots on this page you would

want to have the person’s name for

example to be repeated so for example

there might be at the top here you’d

want uh a guy named John and on the

right hand side you might still want his

name to be John so you’ll put that there

instead of having to write multiple

lines of code to edit and to remember

where you need to make changes

you could just simply do something like

this where you know which tag is where

you want to put the name and then you

just edit it with one line like this

so let me show you okay so first of

first of all let me mention that this

might be bad if you have multiple tables

right so if you had multiple tables of

different data you would want to use

such a generic tag generic selector

which in this case is the tag because it

would edit every single table and of

course those are the tables may have

different information you don’t want to

edit so let’s refine this a little bit

let’s just see

um and in this case let’s change this to

John let’s say we wanted to specify that

in a specific

area we wanted to name uh something John

the person’s name basically there’s a

well an easier way to do this which is

we could go ahead by adding a class so

for example let’s say that we wanted

this area here in string two which is in

the middle here to be John

we could do something like name this

class name so we could literally name it

name right

and let’s see uh I oh well you know what

let me let me show you the the

placeholders back please so you are

aware of the names okay so we have all

of this here string one two three Etc

and what I changed was

um I what I added was class name for

string two which is string two is in the

middle

and let’s see string 12 we wanted to

also put John’s name in there then you

do the same thing for John’s name

right so on the string here you name the

class name

and then what you could do is go back up

and instead we use again a different

selector this time we’d use it you we’d

use it the class dot name well the name

is the class right and you have to put

the dot in for it to know that it’s a

class and then you put in the HTML and

let’s put John do okay

and we save that and then we reload

and what that would do is it would make

John appear on both sides

and so as again I’m coming back to the

point that uh you may not necessarily

need like a high-end high-end framework

like like uh react to do something as

simple as this you could just use an

online jQuery to do that and as you can

see it did it really really fast

now there’s another

um way of doing this but you don’t have

to do it because this Does this does it

so well

um which is you could use each function

there’s also the each function let me

show what each function looks like so

basically that’s dollar sign

in this case name

dot each

and then you can provide it with a

function

with an empty argument of course you

don’t need an argument

but it’s assumed that what this would do

is we would look it would look for every

matching element by this class name

which is name so it would go through

each one

and it would basically it’s like a for

Loop but you do get to see the for Loop

and that’s what this does so in essence

you may be wondering well how do how

would you change each one as long as you

use the each function

there’s

this becomes available the actual with

this so what this refers to is whichever

element

that it matches so it would match this

one

right string two

and it would match this one string 12.

right

and so this would first match string two

and then it would loop again and match

this one and go along like that right

it’s as I said it’s more or the same

thing so this is just a longer way of

doing it you could change the HTML here

and you can put John too and it should

do the same thing so if we save this and

we run this

we should see no change it should do the

same thing

so you have two options of being able to

change

Things based on their tags well not tags

but uh the the classes

and you wouldn’t want to do this with an

ID right the the reason we use this we

use the class is because

um there can be multiple classes of the

same name

however ID is meant to be unique so we

that’s why we didn’t use ID instead of

name now it would work but it’s not best

practice to do that

um so with that being said I want to

keep this video short so I’ll probably

stop here but I hope that this helped

you out in terms of

um how you could use uh jQuery to

quickly and what I mean quickly there’s

very little setup there’s very little

configuration required to be able to

change uh spots or change text in

multiple areas at the same time

with that being said please make sure to

like And subscribe and if of course you

have any questions on how to do

something please let me know and I’ll

try to work on a tutorial to help you

guys out thanks so much see you guys

again soon bye