CODEWITHSUNDEEP
jqueryselector
Roderik
Roderik

Reputation: 3

Select specific p in current div

I have a button with which I want to select only the

in the parent div. I have four of these div with four buttons. I can add an id to each

and make the code four times, but I'd rather find a way to select the p in the div where the button is located.

I tried $('p:'this), $('p:first') and $("p:first-child")

Some select the first child p, but select the other three as well (in other divs). I just want to add a class to the p in the same div as the button.

HTML looks like this:

<div><p> Text </p> <button type="button" class="btn">Click</button></div>

Javascript

$('.btn').on('click', function(){
        $('code to select the <p> in the current div).val();

        $('code to select the <p> in the current div).replaceWith($('.newText').val());
    })

newText is an input from a textarea. Tested it with console.log and it worked.

Upvotes: 0

Views: 52

Answers (3)

M A Salman
M A Salman

Reputation: 3820

You can use $(this).parent().children('p:first-child').text()

$('.btn').on('click', function() {
  $(this).parent().children('p:first-child').text()
  $(this).parent().children('p:first-child').text($('.newText').val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Placeholder:
<textarea class="newText"></textarea><br>
Items:
<div>
  <p>Hey</p>
  <button type="button" class="btn">Click</button>
</div>
<div>
  <p>Yo</p>
  <button type="button" class="btn">Click</button>
</div>
<div>
  <p>Cool</p>
  <button type="button" class="btn">Click</button>
</div>
<div>
  <p>Man</p>
  <button type="button" class="btn">Click</button>
</div>

Upvotes: 0

caramba
caramba

Reputation: 22480

You can find the element from the button you clicked on with $(this) which is the currently clicked button. Then find the .closest() element which is a <div> and from there you get the .children() which is the <p>

$('.btn').on('click', function(){
    console.log(
        $(this).closest('div').children('p').text()
    );
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <p>Hello</p>
    <button type="button" class="btn">Click</button>
</div>
<div>
    <p>World</p>
    <button type="button" class="btn">Click</button>
</div>
<div>
    <p>Awesome</p>
    <button type="button" class="btn">Click</button>
</div>
<div>
    <p>Things</p>
    <button type="button" class="btn">Click</button>
</div>

You can accomplish the exact same thing without jQuery like so

[...document.querySelectorAll('.btn')].forEach( button => {
    button.addEventListener('click', (event) => {
        console.log(
            event.target.closest('div').querySelector('p').innerHTML
        );
    });
});
<div>
    <p>Hello</p>
    <button type="button" class="btn">Click</button>
</div>
<div>
    <p>World</p>
    <button type="button" class="btn">Click</button>
</div>
<div>
    <p>Awesome</p>
    <button type="button" class="btn">Click</button>
</div>
<div>
    <p>Things</p>
    <button type="button" class="btn">Click</button>
</div>

Upvotes: 1

Vimal Patel
Vimal Patel

Reputation: 3055

You can use the Siblings function of jQuery to get the "P" tag and replace its value from whatever user has entered in the input field.

$('.btn').on('click', function(){
    $(this).siblings('p').text($('.newText').val());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p> Text </p> 
<button type="button" class="btn">Click</button>
</div>
<div>
<p> Text </p> 
<button type="button" class="btn">Click</button>
</div>
<input class='newText'/>

Upvotes: 0

Related Questions