jQuery：循环，查找唯一的 div，然后将文本从值附加到跨度

Question

我已经问了很多关于 jQuery 的问题，但没有回答，因为我是初学者；我确实知道如何使用 jQuery 将 CSS 附加到 div，并将文本添加到 div 以及其他简单的事情。

但是，如何做到这一点：

1) 遍历页面上具有唯一 ID 的一组 div，

2) 在 and 中找到相同的 div

3) 将文本从一个 div 附加到第二个 div？

关于 SO 有 #2 和 #3 的答案，但不是我能理解 #1 的句柄。

蹩脚尝试：https://jsfiddle.net/e7nh01x4/

我在具有以下结构的页面上有多个 div 实例；每个 div 都有一个随机数附加到 acf-group_ 主 div。

   <!-- unique div with random number-->
   <div id="acf-group_582920b45454f" class="postbox acf-postbox closed">

   <!-- append text to this div -->
   <h2 class="hndle ui-sortable-handle"><span>Existing Text</span></h2>

        <!-- other html -->

        <div class="acf-field acf-field-text acf-field-582920b45454f" data-name="link_text"
    data-type="text" data-key="field_582920b45454f" data-required="1">
        <div class="acf-label">
            <label for="acf-field_582920b45454f">Link Text
<span class="acf-required">*</span></label>
            </div>
            <div class="acf-input">

           <!-- text value I want is in this div -->

            <div class="acf-input-wrap"><input id="acf-field_582920b45454f" class="" name="acf[field_582920b45454f]"
value="Text I Want" placeholder="" type="text"></div>
        </div>
        </div>

        <!-- other html -->

        </div>

我要做的是从输入字段#acf-field_582920b45454f中获取文本值“我想要的文本”。

每个具有.acf-field .acf-field-text .acf-field-582920b45454f 类的外部 div 也具有数据名称link_text，并且该数据名称在整个 #acf-group_582920b45454f 内的其他 div 中是唯一的。这似乎是找到我需要的文本值的关键。

然后我想在<h2 class="hndle ui-sortable-handle"><span>Existing Text</span> 中现有文本之后的范围内附加该文本Text I Want。

Answer 1

如果我理解正确，你想要：

$('.acf-input-wrap > input').each(function() {
  $(this).closest('.acf-field.acf-field-text').prev('h2').find('span').append($(this).val())
})

$('.acf-input-wrap > input').each(function() {
  $(this).closest('.acf-field.acf-field-text').prev('h2').find('span').append($(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="acf-group_582920b45454f" class="postbox acf-postbox closed">

  <h2 class="hndle ui-sortable-handle"><span>Existing Text</span></h2>

  <div class="acf-field acf-field-text acf-field-582920b45454f" data-name="link_text" data-type="text" data-key="field_582920b45454f" data-required="1">
    <div class="acf-label">
      <label for="acf-field_582920b45454f">Link Text 1
        <span class="acf-required"></span></label>
    </div>
    <div class="acf-input">
      <div class="acf-input-wrap">
        <input id="acf-field_582920b45454f" class="" name="acf[field_582920b45454f]" value="Text I Want 1" placeholder="" type="text">
      </div>
    </div>
  </div>

</div>


<div id="acf-group_5828d46a44c4b" class="postbox acf-postbox closed">

  <h2 class="hndle ui-sortable-handle"><span>Existing Text</span></h2>

  <div class="acf-field acf-field-text acf-field-5828d46a44c4b" data-name="link_text" data-type="text" data-key="field_5828d46a44c4b" data-required="1">
    <div class="acf-label">
      <label for="acf-field_5828d46a44c4b">Link Text 2
        <span class="acf-required"></span></label>
    </div>
    <div class="acf-input">
      <div class="acf-input-wrap">
        <input id="acf-field_5828d46a44c4b" class="" name="acf[field_5828d46a44c4b]" value="Text I Want 2" placeholder="" type="text">
      </div>
    </div>
  </div>

</div>

<div id="acf-group_5828d45828d46" class="postbox acf-postbox closed">

  <h2 class="hndle ui-sortable-handle"><span>Existing Text</span></h2>

  <div class="acf-field acf-field-text acf-field-5828d45828d46" data-name="link_text" data-type="text" data-key="field_5828d45828d46" data-required="1">
    <div class="acf-label">
      <label for="acf-field_5828d45828d46">Link Text 3
        <span class="acf-required"></span></label>
    </div>
    <div class="acf-input">
      <div class="acf-input-wrap">
        <input id="acf-field_5828d45828d46" class="" name="acf[field_5828d45828d46]" value="Text I Want 3" placeholder="" type="text">
      </div>
    </div>
  </div>

</div>

除非您的 HTML 结构与您提供的示例有很大不同，否则关键在于找到您可以使用 $('.acf-input-wrap > input') 执行的输入，基于：

<div class="acf-input-wrap"><input id="acf-field_582920b45454f" class="" name="acf[field_582920b45454f]" value="Text I Want" placeholder="" type="text"></div>

然后您可以通过.each() 循环然后通过closest()、prev() 和find() 遍历到跨度。

Answer 2

您可以遍历每个 <div> 并获取/使用匹配 ID：

$('[id^=acf-group_]').each(function() {
  var getIDnumber = $(this).attr('id').split('_').reverse()[0],
      textWanted = $('.acf-field-'+getIDnumber+' .acf-input-wrap input').val();
  $(this).find('h2').after('<div>'+textWanted+'</div>');
})

这将确保您会根据 ID 号找到完全匹配的匹配项