Question

我在<div>内有多个<div> 其中一个孩子<div>中有一个<select>我知道其ID。

我需要更改孩子<div>的内容，我知道其姓名为：

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

在同一页面上有以上多个，所以我不能按类引用元素，我必须相对于<select>

类似的东西：

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

Answer 1

$("#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>

使用.prev()获取前一个要作为目标div的元素

Answer 2

使用$("#id").parents("your selector goes here") 例如

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

这将返回带有我的块类的父元素的集合，如果你只想要第一个添加.first().

Answer 3

您可以使用

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

Answer 4

尝试

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

请不要忘记添加Jquery参考

Answer 5

班级.alwaysthesame的div是id1家长的兄弟姐妹，因此您可以使用parent()和siblings：

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

希望这有帮助。

$("#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>

Answer 6

关于未来结构标记更改的最安全且最具弹性的方法是在每个块上添加一个类，然后使用closest()找到该元素，然后转到find(".alwaysthesame")：< / p>

$(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/

jQuery - 编辑父级父元素内容

6 个答案: