Question

我有一个wordpress网站，我正在使用高级自定义字段。现在我让它在页面上动态生成div，想要做的是为每个div插入一个唯一的id，当前有id =＆＃34; fader＆＃34;并使用class =＆＃34; headerBanner＆＃34;。

为每个div添加唯一ID

我尝试了一些不同的方法，但没有工作

这是HTML：

<div class="headerBanner"><img src="http://dev.com/wp-content/uploads/2017/01/Exterior-Constuction_Parallax-1.jpg"></div>
<div class="wrapper-body innerPage">
  <div class="wrap clearfix">
    <div class="col-row clearfix markets" id="fader">
      <div class="col two txtpg">
        <div class="col">
          <h3>Siding</h3>
          <p>Client Name has long been recognized as an industry leader in the siding and vertical cladding market.</p>
          <p>Siding has a solid place in the residential housing market as an aesthetically pleasing and cost-effective solution to protect the house from the elements. Client Name has been at the technological forefront to help siding producers keep &#8211; and grow &#8211; their market share.</p><a class="moreBtn" href="/markets/exterior-construction-outdoor-durable-products/siding/">Read More</a>
        </div>
      </div>
      <div class="imgpg"><img alt="" class="sectionImage" src="http://dev.com/wp-content/uploads/2017/01/Siding-Landing-Page-Image-1.jpg"></div>
    </div>
    <div class="col-row clearfix markets" id="fader">
      <div class="col two txtpg">
        <div class="col">
          <h3>Decking</h3>
          <p>Composite decking has come a long way in its brief two decade history, and Client Name has had a front row seat for the entire ride. What began as product to simply utilize scrap wood and shrink wrap that would have otherwise ended up in a land fill, has evolved into a highly engineered, luxury residential construction product.</p><a class="moreBtn" href="/markets/exterior-construction-outdoor-durable-products/decking/">Read More</a>
        </div>
      </div>
      <div class="imgpg"><img alt="" class="sectionImage" src="http://dev.com/wp-content/uploads/2017/01/Decking-Landing-Page-Image.jpg"></div>
    </div>
  </div>
  <div class="headerBanner"><img src="http://dev.com/wp-content/uploads/2017/01/Exterior-Constuction_Parallax-2.jpg"></div>
  <div class="wrapper-body innerPage">
    <div class="wrap clearfix">
      <div class="col-row clearfix markets" id="fader">
        <div class="col two txtpg">
          <div class="col">
            <h3>Roofing</h3>
            <p>When it comes to roofing, we’ve got you covered.</p>
            <p>In commercial applications, we’ve been making color concentrates for outdoor durable films for over half a century, bringing extensive knowledge and experience to the table. Whether it’s for PVC, TPO, or any other polymer, you can rely on Client Name to maximize the performance and aesthetics of your film.</p><a class="moreBtn" href="/markets/exterior-construction-outdoor-durable-products/roofing/">Read More</a>
          </div>
        </div>
        <div class="imgpg"><img alt="" class="sectionImage" src="http://dev.com/wp-content/uploads/2017/01/Roofing_Landing-Page-Image.jpg"></div>
      </div>
      <div class="col-row clearfix markets" id="fader">
        <div class="col two txtpg">
          <div class="col">
            <h3>Synthetic Turf</h3>
            <p>Artificial, or synthetic, turf is a surface of synthetic fibers made to look like natural grass. Because of recent aesthetic and performance improvements, it is now being used on residential and commercial lawns as well. Artificial turf performs well in heavy foot traffic areas and eliminates the need for irrigation or trimming, cutting down on maintenance and costs.</p><a class="moreBtn" href="/markets/exterior-construction-outdoor-durable-products/synthetic-turf/">Read More</a>
          </div>
        </div>
        <div class="imgpg"><img alt="" class="sectionImage" src="http://dev.com/wp-content/uploads/2017/01/Synthetic-Turf_Landing-Page-Image.jpg"></div>
      </div>
    </div>

这是我试过的JS

$(document).ready(function(){
$('.wrapper-body').prop('id', function (i, v) {
return v === '' || 'undefined' === typeof v ? 'new_added_id_' + 
String.fromCharCode(97 + i) : v;
});
    });

Answer 1

添加增量计数器，以便获得＃fader_1，＃fader_2，＃fader_3等。

if( have_rows('repeater_field_name') ):
$i = 0;
while ( have_rows('repeater_field_name') ) : the_row();
$i++;
echo '<div id="fader_.'$i'.">';
the_sub_field('sub_field_name');
echo '</div>';
endwhile;
else :
// no rows found
endif;

动态添加id到WordPress生成的div

1 个答案: