Question

我想.each（）是这种情况的解决方案，我使用带前缀的类，在这种情况下如何使用.each（）？

我尝试了许多方法并且没有取得成功

HTML

<div id="huge_it_slideshow_image_container_1" class="huge_it_slideshow_image_container_1">        
<div class="huge_it_slide_container_1">
<div class="huge_it_slide_bg_1">
<ul class="huge_it_slider_1">
<li class="huge_it_slideshow_image_item_1" id="image_id_1_0" style="transition: opacity 1000ms linear; opacity: 0; z-index: 1;">      
<img id="huge_it_slideshow_image_1_0" class="huge_it_slideshow_image_1" src="//localhost:3000/wp-content/uploads/2016/10/another_world_wallpaper_II___by_night_fate.jpg" alt="Teste" data-image_id="5">

<div class="huge_it_slideshow_title_text_1 none">Garantia de integridade,</div>
<div class="huge_it_slideshow_description_text_1 none">tranquilidade e qualidade dos funcionários  Esse é o nosso principal objetivo!</div>
</li>

<li class="huge_it_slideshow_image_second_item_1" id="image_id_1_1" style="transition: opacity 1000ms linear; opacity: 1; z-index: 2;">      
<a href="http://huge-it.com" target="_blank">
<img id="huge_it_slideshow_image_1_1" class="huge_it_slideshow_image_1" src="//localhost:3000/wp-content/uploads/2016/10/homerb.jpg" alt="Garantia de integridade," data-image_id="3">
</a>        
<div class="huge_it_slideshow_title_text_1">Garantia de integridade,</div>
<div class="huge_it_slideshow_description_text_1">tranquilidade e qualidade dos funcionários  Esse é o nosso principal objetivo!</div>
</li>
</ul>
</div>
<input type="hidden" id="huge_it_current_image_key_1" value="1">
</div>
</div>

JQUERY

$(function(){

      // Change behavior title and description HUGE IT
      var huge_it_title = $( "*[class*='huge_it_slideshow_title_text_']" ).text();
      $( "*[class*='huge_it_slideshow_description_text_']" ).prepend( "<span style='font-weight:bold; text-transform:uppercase;'>" + huge_it_title + "</span><br>" );

    });

Answer 1

链.each()到huge_it_title，其中回调中的this将是当前DOM元素;在回调中，您可以使用.textContent

来引用当前元素文本

var huge_it_title = $("*[class*='huge_it_slideshow_title_text_']");
$("*[class*='huge_it_slideshow_description_text_']")
.each(function(index, el) {
  $(this)
  .prepend("<span style='font-weight:bold; text-transform:uppercase;'>" 
           + huge_it_title[index].this.textContent + "</span><br>")
});

您也可以使用.prepend(function)或.html(function)

$(function() {
  var huge_it_title = $("*[class*='huge_it_slideshow_title_text_']");
  $("*[class*='huge_it_slideshow_description_text_']")
  .prepend(function(index, html) {
      return "<span style='font-weight:bold; text-transform:uppercase;'>" 
             + huge_it_title[index].textContent 
             + "</span><br>" + html
    }).first().css("opacity", 1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="huge_it_slideshow_image_container_1" class="huge_it_slideshow_image_container_1">
  <div class="huge_it_slide_container_1">
    <div class="huge_it_slide_bg_1">
      <ul class="huge_it_slider_1">
        <li class="huge_it_slideshow_image_item_1" id="image_id_1_0" style="style=""transition: opacity 1000ms linear; opacity: 0; z-index: 1;">
          <img id="huge_it_slideshow_image_1_0" class="huge_it_slideshow_image_1" src="" alt="Teste" data-image_id="5">

          <div class="huge_it_slideshow_title_text_1 none">Garantia de integridade,</div>
          <div class="huge_it_slideshow_description_text_1 none">tranquilidade e qualidade dos funcionários Esse é o nosso principal objetivo!</div>
        </li>

        <li class="huge_it_slideshow_image_second_item_1" id="image_id_1_1" style="transition: opacity 1000ms linear; opacity: 1; z-index: 2;">
          <a href="http://huge-it.com" target="_blank">
            <img id="huge_it_slideshow_image_1_1" class="huge_it_slideshow_image_1" src="" alt="Garantia de integridade," data-image_id="3">
          </a>
          <div class="huge_it_slideshow_title_text_1">Garantia de integridade,</div>
          <div class="huge_it_slideshow_description_text_1">tranquilidade e qualidade dos funcionários Esse é o nosso principal objetivo!</div>
        </li>
      </ul>
    </div>
    <input type="hidden" id="huge_it_current_image_key_1" value="1">
  </div>
</div>

在这种情况下如何使用每个

1 个答案: