markratledge markratledge - 17 days ago 8
jQuery Question

jQuery: Loop, find unique divs, and then append text from a value to a span

I've asked lots of questions about jQuery and have answered none, as I'm a beginner; I do know how to use jQuery to append CSS to a div, and add text to a div, and other easy things.

But, how does one go about this:

1) loop through a group of divs on a page that have unique IDs,

2) find the same div within and

3) append text from that one div to a second div?

There are answers on SO that do #2 and #3, but not that I could understand that handle #1.

Lame attempt: https://jsfiddle.net/e7nh01x4/

I have multiple instances of divs on a page with the structure below; each div has a random number appended to

acf-group_
main 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>


What I want to do is grab the text value "Text I Want" from the input field
#acf-field_582920b45454f
.

Each of these outer divs with the classes
.acf-field .acf-field-text .acf-field-582920b45454f
also have the data-name
link_text
, and that data-name is unique among other divs inside the
#acf-group_582920b45454f
as a whole. This appears to be the key to locate the text value I need.

And then I want to append that text
Text I Want
inside the span after the existing text in
<h2 class="hndle ui-sortable-handle"><span>Existing Text</span>
.

Answer

If I understand you correctly you want:

$('.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>

Unless your HTML structure is vastly different from the example you provided, the key lies with locating your inputs which you can do with $('.acf-input-wrap > input') based on:

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

Then you can loop over then via .each() and traversing to the span via closest(), prev(), and find().

Comments