CODEWITHSUNDEEP
javascriptjquery
Gixty
Gixty

Reputation: 202

How to change content of a specific div that has data-attribute?

I want to know how I can change the content of a specific div that has data attribute.

I am using a click event and .html

I have many div elements as follows:

<div class"name-of-class" data-user-id="ID">Content that changes</div>

I already have the ID variable to identify what div I need to change

$('.name-of-class').click( function() {
  $('.name-of-class').html('new content');
}

So, I want to use the data attribute data-user-id inside the click function to specify exactly what div I need to change.

I hope I am making myself clear, if not, I will try to explain myself better.

Upvotes: 2

Views: 3088

Answers (3)

Satpal
Satpal

Reputation: 133403

You can use Attribute Equals Selector [name="value"]

$('.name-of-class').click( function() {
  $('.name-of-class[data-user-id="id"]').html('new content');
}

EDIT

As per comment

$('.name-of-class').click( function() {
  $('.name-of-class[data-user-id="' + useridvariable +'"]').html('new content');
}

Upvotes: 0

Adil
Adil

Reputation: 148130

You can use Attribute Equals Selector [name="value"].

$('.name-of-class').click( function() {
  $('[data-user-id="id"]').html('new content');
}

Edit, based on comments, to pass variable

$('.name-of-class').click( function() {
  $('[data-user-id="'+ idVariable +'"]').html('new content');
}

Upvotes: 1

Abdullah Al Shakib
Abdullah Al Shakib

Reputation: 2044

Use this:

HTML:

<div class="name-of-class" data-user-id="ID">Content that changes</div>

jQuery:

$('.name-of-class').click( function() {
   $(this).html('new content');
});

Upvotes: 0

Related Questions