CODEWITHSUNDEEP
jqueryhtmljquery-selectors
Lee
Lee

Reputation: 1495

jQuery - Edit content of element within parent of parent

I have multiple <div>'s within a <div>.
Within one of the child <div>'s is a <select> which I know the ID of.

I need to change the content a child <div> which I know the class name of:

<div>
  <div></div>
  <div></div>
  <div class="alwaysthesame">I want to edit this content</div>
  <div>
    <select id="id1"></select>
  </div>
</div>

There are multiple of the above on the same page, so I can't reference the element by class, I have to do it relative to the <select>

Something like:

$("#id1").parent().something(".alwaysthesame").html("new value");

Upvotes: 2

Views: 750

Answers (6)

Raimonds
Raimonds

Reputation: 537

Use $("#id").parents("your selector goes here") for an example

$("#id").parents(".my-block")

this will return collection of parent elements with class my block, if you want only the first one add .first().

Upvotes: 1

connexo
connexo

Reputation: 56744

The safest - and most resilient way regarding future structural markup changes - would be to add a class on each of those blocks, then use closest() to find that element, then go for find(".alwaysthesame"): 

$(document).ready(function() {
  $("#id1").closest(".block").find(".alwaysthesame").text("new text");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div></div>
  <div></div>
  <div class="alwaysthesame">I want to edit this content</div>
  <div>
    <select id="id1"></select>
  </div>
</div>

https://api.jquery.com/closest/

https://api.jquery.com/find/

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

The div with class .alwaysthesame is a sibling of id1 parent so you could use parent() and siblings like :

$("#id1").parent().siblings(".alwaysthesame").html("new value");

Hope this helps.

$("#id1").parent().siblings(".alwaysthesame").html("new value");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div></div>
  <div></div>
  <div class="alwaysthesame">I want to edit this content</div>
  <div>
    <select id="id1">
         <option>1</option>
         <option>2</option>
         <option>3</option>
    </select>
  </div>
</div>

Upvotes: 0

maulik sakhare
maulik sakhare

Reputation: 2037

Try 

$('#question').parent('div').prev('div').html('Your text')

Please don't forget to add Jquery reference

Upvotes: 0

Super User
Super User

Reputation: 9642

You can use

$("#id1").parent().parent().find(".alwaysthesame").html("new value");

Upvotes: 0

guradio
guradio

Reputation: 15555

$("#id1").parent().prev(".alwaysthesame").html("new value");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div></div>
  <div></div>
  <div class="alwaysthesame">I want to edit this content</div>
  <div>
    <select id="id1"></select>
  </div>
</div>

Use .prev() to get the previous element which is the div you want to target

Upvotes: 1

Related Questions