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

【问题标题】：Select element with specified class name in previous div在上一个 div 中选择具有指定类名的元素
【发布时间】：2018-08-02 09:53:49
【问题描述】：

我有以下 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>

我需要将input 中的名称插入'mailName' 类到'.dearName' span。但是，我在试图弄清楚这里的父母/兄弟姐妹关系时迷失了方向。我尝试了以下我知道是各种错误的方法：

$(".dearName").html($(this).parent().parent().siblings().find('.mailName')val());

我的逻辑是找到这个span（我认为是 .preview1 div）的祖父元素的兄弟姐妹，然后找到具有类 'mailName' 的元素 - 显然我我离这里很远，但我无法解决这个问题。我还认为我在这里错误的上下文中使用了'this'...

更新：完整的 HTML

<body>

<script>

$('.dearName').html(function() { 返回 $(this)
.closest('.preview1')
.siblings('.mailName')
.val(); });

</script>



  <form>

      <div class="even group">

          <input type="text" id="yourName" class="contactNameInput" name="yourName" placeholder="Your name">

          <input type="text" id="yourPosition" class="contactNameInput" name="yourPosition" placeholder="Your position">

      </div>



      <div class="odd group">

           <input type="checkbox" id="check1" class="check" checked>

           <input type="text" id="name1" class="contactNameInput" name="toAddress1">

           <input type="text" id="contactName1" class="contactNameInput mailName" name="contactName1">

           <input type="text" id="time1" class="contactNameInput hidden" name="time1">

           <input type="text" id="day1" class="contactNameInput hidden" name="day1">

           <input type="text" id="date1" class="contactNameInput hidden" name="date1">

           <textarea class="additional contactNameInput" id="additional1" name="additional1" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div>       

      </div>



      <div class="even group">

           <input type="checkbox" id="check2" class="check" checked>

           <input type="text" name="toAddress2" id="name2" class="contactNameInput">

           <input type="text" id="contactName2" class="contactNameInput mailName" name="contactName2">

           <input type="text" id="time2" class="contactNameInput hidden" name="time2">

           <input type="text" id="day2" class="contactNameInput hidden" name="day2">

           <input type="text" id="date2" class="contactNameInput hidden" name="date2">

           <textarea class="additional contactNameInput" id="additional2" name="additional2" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div>       

           </div>



       <div class="odd group">

           <input type="checkbox" id="check3" class="check" checked>

           <input type="text" name="toAddress3" id="name3" class="contactNameInput">

           <input type="text" id="contactName3" class="contactNameInput mailName" name="contactName3">

           <input type="text" id="time3" class="contactNameInput hidden" name="time3">

           <input type="text" id="day3" class="contactNameInput hidden" name="day3">

           <input type="text" id="date3" class="contactNameInput hidden" name="date3">

           <textarea class="additional contactNameInput" id="additional3" name="additional3" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div>  

      </div>

       <div class="even group">

           <input type="checkbox" id="check4" class="check" checked>

           <input type="text" name="toAddress4" id="name4" class="contactNameInput">

           <input type="text" id="contactName4" class="contactNameInput mailName" name="contactName4">

           <input type="text" id="time4" class="contactNameInput hidden" name="time4">

           <input type="text" id="day4" class="contactNameInput hidden" name="day4">

           <input type="text" id="date4" class="contactNameInput hidden" name="date4">

           <textarea class="additional contactNameInput" id="additional4" name="additional4" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

       <div class="odd group">

           <input type="checkbox" id="check5" class="check" checked>

           <input type="text" name="toAddress5" id="name5" class="contactNameInput">

           <input type="text" id="contactName5" class="contactNameInput mailName" name="contactName5">

           <input type="text" id="time5" class="contactNameInput hidden" name="time5">

           <input type="text" id="day5" class="contactNameInput hidden" name="day5">

           <input type="text" id="date5" class="contactNameInput hidden" name="date5">

           <textarea class="additional contactNameInput" id="additional5" name="additional5" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

        <div class="even group">

           <input type="checkbox" id="check6" class="check" checked>

           <input type="text" name="toAddress6" id="name6" class="contactNameInput">

           <input type="text" id="contactName6" class="contactNameInput mailName" name="contactName6">

           <input type="text" id="time6" class="contactNameInput hidden" name="time6">

           <input type="text" id="day6" class="contactNameInput hidden" name="day6">

           <input type="text" id="date6" class="contactNameInput hidden" name="date6">

           <textarea class="additional contactNameInput" id="additional6" name="additional6" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="odd group">

           <input type="checkbox" id="check7" class="check" checked>

           <input type="text" name="toAddress7" id="name7" class="contactNameInput">

           <input type="text" id="contactName7" class="contactNameInput mailName" name="contactName7">

           <input type="text" id="time7" class="contactNameInput hidden" name="time7">

           <input type="text" id="day7" class="contactNameInput hidden" name="day7">

           <input type="text" id="date7" class="contactNameInput hidden" name="date7">

           <textarea class="additional contactNameInput" id="additional7" name="additional7" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="even group">

           <input type="checkbox" id="check8" class="check" checked>

           <input type="text" name="toAddress8" id="name8" class="contactNameInput">

           <input type="text" id="contactName8" class="contactNameInput mailName" name="contactName8">

           <input type="text" id="time8" class="contactNameInput hidden" name="time8">

           <input type="text" id="day8" class="contactNameInput hidden" name="day8">

           <input type="text" id="date8" class="contactNameInput hidden" name="date8">

           <textarea class="additional contactNameInput" id="additional8" name="additional8" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="odd group">

           <input type="checkbox" id="check9" class="check" checked>

           <input type="text" name="toAddress9" id="name9" class="contactNameInput">

           <input type="text" id="contactName9" class="contactNameInput mailName" name="contactName9">

           <input type="text" id="time9" class="contactNameInput hidden" name="time9">

           <input type="text" id="day9" class="contactNameInput hidden" name="day9">

           <input type="text" id="date9" class="contactNameInput hidden" name="date9">

           <textarea class="additional contactNameInput" id="additional9" name="additional9" placeholder="Additional requests..."></textarea>

          <div class="preview1"></div> 

      </div>

      <div class="even group">

           <input type="checkbox" id="check10" class="check" checked>

           <input type="text" name="toAddress10" id="name10" class="contactNameInput">

           <input type="text" id="contactName10" class="contactNameInput mailName" name="contactName10">

           <input type="text" id="time10" class="contactNameInput hidden" name="time10">

           <input type="text" id="day10" class="contactNameInput hidden" name="day10">

           <input type="text" id="date10" class="contactNameInput hidden" name="date10">

           <textarea class="additional contactNameInput" id="additional10" name="additional10" placeholder="Additional requests..."></textarea>

          <div class="preview1"></div> 

      </div>

      <div class="odd group">

           <input type="checkbox" id="check11" class="check" checked>

           <input type="text" name="toAddress11" id="name11" class="contactNameInput">

           <input type="text" id="contactName11" class="contactNameInput mailName" name="contactName11">

           <input type="text" id="time11" class="contactNameInput hidden" name="time11">

           <input type="text" id="day11" class="contactNameInput hidden" name="day11">

           <input type="text" id="date11" class="contactNameInput hidden" name="date11">

           <textarea class="additional contactNameInput" id="additional11" name="additional11" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="even group">

           <input type="checkbox" id="check12" class="check" checked>

           <input type="text" name="toAddress12" id="name12" class="contactNameInput">

           <input type="text" id="contactName12" class="contactNameInput mailName" name="contactName12">

           <input type="text" id="time12" class="contactNameInput hidden" name="time12">

           <input type="text" id="day12" class="contactNameInput hidden" name="day12">

           <input type="text" id="date12" class="contactNameInput hidden" name="date12">

           <textarea class="additional contactNameInput" id="additional12" name="additional12" placeholder="Additional requests..."></textarea>

          <div class="preview1"></div> 

      </div>

      <div class="odd group">

           <input type="checkbox" id="check13" class="check" checked>

           <input type="text" name="toAddress13" id="name13" class="contactNameInput">

           <input type="text" id="contactName13" class="contactNameInput mailName" name="contactName13">

           <input type="text" id="time13" class="contactNameInput hidden" name="time13">

           <input type="text" id="day13" class="contactNameInput hidden" name="day13">

           <input type="text" id="date13" class="contactNameInput hidden" name="date13">

           <textarea class="additional contactNameInput" id="additional13" name="additional13" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="even group">

           <input type="checkbox" id="check14" class="check" checked>

           <input type="text" name="toAddress14" id="name14" class="contactNameInput">

           <input type="text" id="contactName14" class="contactNameInput mailName" name="contactName14">

           <input type="text" id="time14" class="contactNameInput hidden" name="time14">

           <input type="text" id="day14" class="contactNameInput hidden" name="day14">

           <input type="text" id="date14" class="contactNameInput hidden" name="date14">

           <textarea class="additional contactNameInput" id="additional14" name="additional14" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="odd group">

           <input type="checkbox" id="check15" class="check" checked>

           <input type="text" name="toAddress15" id="name15" class="contactNameInput">

           <input type="text" id="contactName15" class="contactNameInput mailName" name="contactName15">

           <input type="text" id="time15" class="contactNameInput hidden" name="time15">

           <input type="text" id="day15" class="contactNameInput hidden" name="day15">

           <input type="text" id="date15" class="contactNameInput hidden" name="date15">

           <textarea class="additional contactNameInput" id="additional15" name="additional15" placeholder="Additional requests..."></textarea>

          <div class="preview1"></div> 

      </div>

      <div class="even group">

           <input type="checkbox" id="check16" class="check" checked>

           <input type="text" name="toAddress16" id="name16" class="contactNameInput">

           <input type="text" id="contactName16" class="contactNameInput mailName" name="contactName16">

           <input type="text" id="time16" class="contactNameInput hidden" name="time16">

           <input type="text" id="day16" class="contactNameInput hidden" name="day16">

           <input type="text" id="date16" class="contactNameInput hidden" name="date16">

           <textarea class="additional contactNameInput" id="additional16" name="additional16" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="odd group">

           <input type="checkbox" id="check17" class="check" checked>

           <input type="text" name="toAddress17" id="name17" class="contactNameInput">

           <input type="text" id="contactName17" class="contactNameInput mailName" name="contactName17">

           <input type="text" id="time17" class="contactNameInput hidden" name="time17">

           <input type="text" id="day17" class="contactNameInput hidden" name="day17">

           <input type="text" id="date17" class="contactNameInput hidden" name="date17">

           <textarea class="additional contactNameInput" id="additional17" name="additional17" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="even group">

           <input type="checkbox" id="check18" class="check" checked>

           <input type="text" name="toAddress18" id="name18" class="contactNameInput">

           <input type="text" id="contactName18" class="contactNameInput mailName" name="contactName18">

           <input type="text" id="time18" class="contactNameInput hidden" name="time18">

           <input type="text" id="day18" class="contactNameInput hidden" name="day18">

           <input type="text" id="date18" class="contactNameInput hidden" name="date18">

           <textarea class="additional contactNameInput" id="additional18" name="additional18" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="odd group">

           <input type="checkbox" id="check19" class="check" checked>

           <input type="text" name="toAddress19" id="name19" class="contactNameInput">

           <input type="text" id="contactName19" class="contactNameInput mailName" name="contactName19">

           <input type="text" id="time19" class="contactNameInput hidden" name="time19">

           <input type="text" id="day19" class="contactNameInput hidden" name="day19">

           <input type="text" id="date19" class="contactNameInput hidden" name="date19">

           <textarea class="additional contactNameInput" id="additional19" name="additional19" placeholder="Additional requests..."></textarea>

          <div class="preview1"></div> 

      </div>

      <div class="even group">

           <input type="checkbox" id="check20" class="check" checked>

           <input type="text" name="toAddress20" id="name20" class="contactNameInput">

           <input type="text" id="contactName20" class="contactNameInput mailName" name="contactName20">

           <input type="text" id="time20" class="contactNameInput hidden" name="time20">

           <input type="text" id="day20" class="contactNameInput hidden" name="day20">

           <input type="text" id="date20" class="contactNameInput hidden" name="date20">

           <textarea class="additional contactNameInput" id="additional20" name="additional20" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="odd group">

           <input type="checkbox" id="check21" class="check" checked>

           <input type="text" name="toAddress21" id="name21" class="contactNameInput">

           <input type="text" id="contactName21" class="contactNameInput mailName" name="contactName21">

           <input type="text" id="time21" class="contactNameInput hidden" name="time21">

           <input type="text" id="day21" class="contactNameInput hidden" name="day21">

           <input type="text" id="date21" class="contactNameInput hidden" name="date21">

           <textarea class="additional contactNameInput" id="additional21" name="additional21" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="even group">

           <input type="checkbox" id="check22" class="check" checked>

           <input type="text" name="toAddress22" id="name22" class="contactNameInput">

           <input type="text" id="contactName22" class="contactNameInput mailName" name="contactName22">

           <input type="text" id="time22" class="contactNameInput hidden" name="time22">

           <input type="text" id="day22" class="contactNameInput hidden" name="day22">

           <input type="text" id="date22" class="contactNameInput hidden" name="date22">

           <textarea class="additional contactNameInput" id="additional22" name="additional22" placeholder="Additional requests..."></textarea>

          <div class="preview1"></div> 

      </div>

      <div class="odd group">

           <input type="checkbox" id="check23" class="check" checked>

           <input type="text" name="toAddress23" id="name23" class="contactNameInput">

           <input type="text" id="contactName23" class="contactNameInput mailName" name="contactName23">

           <input type="text" id="time23" class="contactNameInput hidden" name="time23">

           <input type="text" id="day23" class="contactNameInput hidden" name="day23">

           <input type="text" id="date23" class="contactNameInput hidden" name="date23">

           <textarea class="additional contactNameInput" id="additional23" name="additional23" placeholder="Additional requests..."></textarea>

           <div class="preview1"></div> 

      </div>

      <div class="even group">

           <input type="checkbox" id="check24" class="check" checked>

           <input type="text" name="toAddress24" id="name24" class="contactNameInput">

           <input type="text" id="contactName24" class="contactNameInput mailName" name="contactName24">

           <input type="text" id="time24" class="contactNameInput hidden" name="time24">

           <input type="text" id="day24" class="contactNameInput hidden" name="day24">

           <input type="text" id="date24" class="contactNameInput hidden" name="date24">

           <textarea class="additional contactNameInput" id="additional24" name="additional24" placeholder="Additional requests..."></textarea>

          <div class="preview1"></div> 

      </div>

      <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"></div> 

       </div>



                <button type="submit" class="btn btn-primary googleGreen" id="load" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Sending">Invite hotels</button>




            </form>





    <script>


             $(".additional").focus(function(){
                $(this).siblings('div:first').slideDown();
                }).blur(function() {
                $(this).siblings('div:first').slideUp();
                });       


             $(".additional").keyup(function() {
                $(this).next('div').find('.addedText').html($(this).val());
                });

             $(".preview1").html("<p> Dear <span class='dearName'></span></p> <br> <p>I am writing because I will be coming out to the area shortly and wondered if you would be availble to meet with me on </p><br><p><span class='addedText'></span>If you could kindly let me know if you are able to confirm that would be great.</p><br><p>Many thanks and I look forward to hearing from you soon.</p><br><p>Yours sincerely,</p>");




     var idArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];

    var hotelName = "";
    var hotelAddress = "";
    var hotelContact = "";
    var hotelTel = "";
    var hotelEmail = "";

function onSuccess(test){
var hotelArray = test;
for(var i=0; i<idArray.length; i++){
hotelName = test[i].name;
hotelAddress = test[i].address;
hotelContact = test[i].contact;
hotelTel = test[i].tel;
hotelEmail = test[i].email;
time = test[i].time;
day = test[i].day;
date = test[i].date;


$("#name" + idArray[i]).val(hotelEmail);
$("#contactName" + idArray[i]).val(hotelContact);
$("#time" + idArray[i]).val(time);
$("#day" + idArray[i]).val(day);
$("#date" + idArray[i]).val(date);

}

} google.script.run.withSuccessHandler(onSuccess).findHotel();


    </script>

</body>

【问题讨论】：

标签： jquery selector parent

【解决方案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>

【讨论】：

嗯，我喜欢这个解决方案的想法，但由于某种原因无法让它发挥作用:( .
只需将它放在您使用代码的位置 - 显然，当您运行 js 时，您需要在 mailName 输入中有一个值 - 我看不到您生成您的按钮预览所以你怎么称呼它？
很抱歉试图简化脚本，但可能没有帮助。我添加了一个更完整版本的更新。本质上，.preview1 div 是空的，并在页面加载时通过 jQuery 函数填充。所以没有按钮来生成预览 - 它就在那里（它被隐藏了，然后当 textarea 聚焦时向下滑动......）
那么您的输入中没有数据，这就是它不起作用的原因，您需要添加一个按钮并将其绑定到单击事件。同样在您更新的 html 中，您不再拥有 Dearme
啊哈，是的，这很棒。最后，我实际上将它用于 .focus 触发器，现在效果很好。感谢您的帮助！

【解决方案2】：

您必须使用最接近并找到。哪个是granParent 输入名称？对于设置为 DearName，MailName 为：

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：