How to change a string within a div that your selector is in with JQuery?

Question

How do you change the name of text within a div that your selector is inside of? In other words, I'd like to click on a button and change the text of the text above the button (within the same div).

For example, in my html, there is a button and a title above it. Once the button is clicked, I'd like the title above it to change to the id of the button.

This problem is similar to this question, but I'm having difficulty changing the text within the div that the selector is in.

Below is my attempt to grab the id of the button, and change the text within the div container.

Javascript (my attempt) (codepen here):

$('.btn.btn-default').on('click', function() {
  var desired_name = $(this).attr('id')
  $('#title').find($(this)).html(desired_name);
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="title">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default"  id="true_name1">NAME</button>
</div>


<div>
<p id="title">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default"  id="true_name2">NAME</button>
</div>

Please note that you are using two elements with the same ID ("title"). You should change these to classes (be sure to update your selectors). — johnniebenson, Sep 14 '16 at 21:33
Consider using [data attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) for adding additional data to element rather than using the id attribute. ` — Preston S, Sep 14 '16 at 21:46

score 1 · Accepted Answer · answered Sep 14 '16 at 21:30

1

Have you tried $(this).siblings("p") This will select the <p> above the button

answered Sep 14 '16 at 21:30

Pipe

2,379
2
19
33

score 1 · Answer 2 · answered Sep 14 '16 at 21:31

1

Have you tried jquery .prev()

https://api.jquery.com/prev/

$('.btn.btn-default').on('click', function() {
    var desired_name = $(this).attr('id')
    $(this).prev().html(desired_name);
});

answered Sep 14 '16 at 21:31

sidarcy

2,958
2
36
37

score 0 · Answer 3 · answered Sep 14 '16 at 21:31

You can use the jQuery method siblings() to select the <p> element inside your <div> container.

However I recommend using a class as a unique selector inside your container.

$('.btn.btn-default').on('click', function() {
  $(this).siblings(".desired-name").text($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="desired-name">Temporary Button Title That Should be 'true_name1'</p>
  <button class="btn btn-default" id="true_name1">NAME</button>
</div>


<div>
  <p class="desired-name">Temporary Button Title That Should be 'true_name1'</p>
  <button class="btn btn-default" id="true_name2">NAME</button>
</div>

score 0 · Answer 4 · answered Sep 14 '16 at 21:34

0

Change the ID's to classes for starters. Then target them like this:

$('.btn.btn-default').on('click', function() {
  var desired_name = $(this).attr('id');
  $(this).prev(".title").text(desired_name);
});

answered Sep 14 '16 at 21:34

johnniebenson

540
3
9

How to change a string within a div that your selector is in with JQuery?

4 Answers4