jQuery中的函数循环元素并显示/隐藏？答案

【问题标题】：Function in jQuery to loop over elements and show/hide?jQuery中的函数循环元素并显示/隐藏？
【发布时间】：2015-10-18 21:32:10
【问题描述】：

我有一个字符串，我想将其拆分为一组 <p> 元素，创建一个函数以延迟显示/隐藏每个元素，然后在用户按下按钮时重新运行该函数。

到目前为止，我将字符串拆分为结果 <p>，但我试图循环它们并在延迟时显示/隐藏每个字符串的努力都没有成功。

Here's a fiddle:

HTML：

<div>
    <span>Hello! Lorem ipsom dolor set amit.</span>
    <div class="result"></div>
</div>
<button>Run</button>

Js：

var words = $("span").text();
var split = words.split(" ");
for(var i = 0; i < split.length; i++) {
    $(".result").append("<p>" + split[i] + "</p>");
};

简而言之：我希望它看起来像：

<p1>.show(1000) -> <p1>.hide() <p2>.show(1000) -> <p2>.hide() <p3>.show(1000)...

【问题讨论】：

stackoverflow.com/questions/4607613/…
听起来像是 angularjs 和 ng-repeat 和 ng-show 的工作 :)
我实际上确定它已经用 Angular 编写了。我正在做的只是一个快速的概念证明，所以我不在乎它有多漂亮。除了快速显示之外，它永远不会用于任何其他用途。

标签： javascript jquery

【解决方案1】：

尝试使用.queue()、.fadeIn()、.fadeOut()

var words = $("span").text(), result = $(".result")
, split = words.split(" ");
for (var i = 0; i < split.length; i++) {
  result.append("<p style=display:none;padding:2px;> " + split[i] + " </p>");
};
$("button").click(function() {
  if (result.queue("cycle").length === 0) {
    result.queue("cycle", $.map($("> p", result), function(el, i) {
      return function(next) {
        $(el).fadeIn(1000, function() {
          $(this).fadeOut(next)
        })
      }
    })).dequeue("cycle")
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <span>Hello! Lorem ipsom dolor set amit.</span>
  <div class="result"></div>
</div>
<button>Run</button>

【讨论】：

【解决方案2】：

使用 jQuery Promise 的一种非常简单的方法：

$('button').on('click', function() {
  $('.result').empty(); //reset
  var words = $("span").text();
  var split = words.split(" ");
  for (var i = 0; i < split.length; i++) {
    var p = $("<p>" + split[i] + "</p>");
    p.appendTo('.result');
  };

  var p = $.Deferred().resolve().promise();
  $('.result p').each(function(i, par) {
    var $par = $(par);
    p = p.then(function() {
      $par.show(500).delay(500).hide(500);
      return $par.promise();
    });
  });
});

.result {
  height: 20px;
  }

.result p {
  margin: 0px;
  display : none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>Hello! Lorem ipsom dolor set amit.</span>
  <div class="result"></div>
</div>
<button>Run</button>

【讨论】：