Question

我有以下HTML：

<div class="odd group">
  <input type="checkbox" id="check25" class="check" checked>
  <input type="text" name="toAddress25" id="name25" class="contactNameInput">
  <input type="text" id="contactName25" class="contactNameInput mailName" name="contactName25">
  <input type="text" id="time25" class="contactNameInput hidden" name="time25">
  <input type="text" id="day25" class="contactNameInput hidden" name="day25">
  <input type="text" id="date25" class="contactNameInput hidden" name="date25">
  <textarea class="additional contactNameInput" id="additional25" name="additional25" placeholder="Additional requests..."></textarea>

  <div class="preview1">
    <p>Dear <span class="dearName"></span></p>
  </div>

</div>

我需要将{strong>'mailName'类的input中的名称插入'。dearName' {{1 }}。但是，我在这里弄清楚父母/兄弟姐妹的关系时迷路了。我尝试了以下我知道各种各样的错误：

span

在这里，我的逻辑是找到该$(".dearName").html($(this).parent().parent().siblings().find('.mailName')val());的祖父母元素（我认为是.preview1 div）的兄弟姐妹，然后找到类'mailName'的元素-显然，我已经离开这里了，但是无法解决这个问题。我还认为我在错误的上下文中使用span ...

更新：完整的HTML

'this'

$（'。dearName'）。html（function（）{       返回$（this）
        .closest（'。preview1'）
        .siblings（'。mailName'）
        .val（）;     }）;

<body>

<script>

Answer 1

您几乎就在那儿，而不是做find，只需将选择器放在siblings中即可。同样在html中，如果您使用this，则需要在函数中返回html：

$('.generate').on('click', function() {
  $(this).next('.preview1').find('.dearName')          // this selector depends on where you put your button
    .html(function() {               // you need to make a function
      return $(this)                 // and return the value you want to be the html
        .closest('.preview1')        // I would use closest here so you are not limited to keeping the html as 2 deep
        .siblings('.mailName')       // put the selector in here (not a separate find)
        .val();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check25" class="check" checked>
<input type="text" name="toAddress25" id="name25" class="contactNameInput">
<input type="text" id="contactName25" class="contactNameInput mailName" value="test" name="contactName25">
<input type="text" id="time25" class="contactNameInput hidden" name="time25">
<input type="text" id="day25" class="contactNameInput hidden" name="day25">
<input type="text" id="date25" class="contactNameInput hidden" name="date25">
<textarea class="additional contactNameInput" id="additional25" name="additional25" placeholder="Additional requests..."></textarea>
<br>
<input type="submit" name="submit" value="Generate Preview" class="generate">
<div class="preview1">

  <p>Dear <span class="dearName"></span></p>


</div>

Answer 2

您必须使用最近和查找。 granParent输入名称是什么？用于设置为dearName的MailName为：

  $(".dearName").closest("#granParentDiv").find(".mailName").val()

Answer 3

如果mailName类只有一个元素，则无需查找父母或祖父母。

$(".dearName").html($(".dearName").val()); will do the work.

如果您有多个具有相同类名的输入

 $(".dearName").html($("#contactName25").val()); will do the work.

在上一个div中选择具有指定类名称的元素

3 个答案: