在jQuery中

Question

我正在加载新闻故事网格，并希望在网格中的特定位置添加两个DFP广告 - 由数据属性data-adposition定义

这是div的HTML

<div class="aggregator"> 
  <div class="news-item"> </div>
  <div class="news-item"> </div>
  <div class="news-item"> </div>
  <div class="news-item"> </div>
</div>

<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->

<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
    <div class="dfp" data-adposition="<?php echo $dfpPos; ?>">
        <h2>Test DFP ONE</h2>
    </div>

    <div class="dfp" data-adposition="<?php echo $dfpHalfPos; ?>">
        <h2>Test DFP TWO</h2>
    </div>
</div>

然后我循环并正在使用detach()保存数据，但将其从文档中删除。

$(".dfp").each(function(){
    var dfpHTML = $(this).detach();
    var dfpPos = $(this).data("adposition");
    $(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});

目前没有运气！ detach()在我console.log时存储数据时起作用，但不会附加到data-adposition

中定义的位置

Answer 1

它对我有用。你从数据广告的PHP表达式回来了什么？

＆＃13;

＆＃13;

$(document).ready(function(){
  var selector = ".aggregator";
  $(".dfp").each(function(){
    var dfpHTML = $(this).detach();
    var dfpPos = $(this).data("adposition");
    $(selector + " .news-item").eq(dfpPos).after(dfpHTML);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aggregator"> 
  <div class="news-item">n1 </div>
  <div class="news-item">n2 </div>
  <div class="news-item">n3 </div>
  <div class="news-item">n4 </div>
</div>

<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->

<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
    <div class="dfp" data-adposition="1">
        <h2>Test DFP ONE</h2>
    </div>

    <div class="dfp" data-adposition="2">
        <h2>Test DFP TWO</h2>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;