时间戳

首页 > 解决方案 > 循环遍历一组 DIv 并将它们的 innerHTML 显示为 H 标签？

jquery - 循环遍历一组 DIv 并将它们的 innerHTML 显示为 H 标签？

问题描述

对于这样的每个文本块：

<div class="articles-slider">
<div class="slick-slide"><div class="user-title">danny<div>...more DIVs....<ul class="socials">.... 
</ul><div>
<div class="slick-slide"><div class="user-title">jane<div>...more DIVs....<ul class="socials">.... 
</ul><div>
<div class="slick-slide"><div class="user-title">tom<div>...more DIVs....<ul class="socials">.... 
</ul><div>
<div>

  1. 循环遍历类“user-title”数组并提取其内部 html。

    var theNames = [];
jQuery('.user-title').each(function () {
    theNames.push(this.innerHTML);
});

  2. 在 UL class="socials" 之前添加一个空的 H4 TAG。

    var theNames = [];
jQuery(".socials").prepend('<H4 class="sr-only the_title"></H4>');
jQuery('.user-title').each(function () {
    theNames.push(this.innerHTML);
});

-寻求帮助-

  1. 将 names.innerhtml 分别添加到 H4 标签中。

    var theNames = [];
var theNamesText = [];
jQuery(".socials").prepend('<H4 class="sr-only the_title"></H4>');
jQuery('.user-title').each(function () {    
    theNames.push(this.innerHTML);
});

标签： jqueryarraysloopsfor-loop

解决方案

看起来你把问题复杂化了。无需存储标题。根据您的代码，您应该能够找到一个容器元素，它是您希望使用的元素的父元素 ( $container)。然后找到您需要使用的元素（$userTitle和$socials），如果它们存在，请添加H4标题。

$('slick-slide').each(function() {
  var $container = $(this);
  var $userTitle = $container.find('.user-title');
  var $socials = $container.find('.socials');
  if ($userTitle.length == 1 && $socials.length == 1) {
    $socials.prepend('<H4 class="sr-only the_title">' $userTitle.innerHtml '</H4>');
  }
});

推荐阅读