CODEWITHSUNDEEP
jqueryhtml
markratledge
markratledge

Reputation: 17561

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>.

Upvotes: 0

Views: 981

Answers (2)

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

You can loop through each <div> and fetch/use the matchin 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>');
})

This will make sure that you will find the exact match based on the ID-number

Upvotes: 0

j08691
j08691

Reputation: 207900

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().

Upvotes: 2

Related Questions