$(element:visible) 在 $(this) 之前或之后

Question

如何确定 HTML 中 $(element:visible) 是放置在 $(this) 之前还是之后？

我的 HTML 代码如下所示

<div class="wrapper" style="display:none;">
    <div class="title">1</div>
    <div class="text">Lorem Ipsum</div>
</div>

<div class="wrapper">
    <div class="title">2</div>
    <div class="text">Lorem Ipsum</div>
</div>

<div class="wrapper" style="display:none;">
    <div class="title">3</div>
    <div class="text">Lorem Ipsum</div>
</div>

<div class="wrapper" style="display:none;">
    <div class="title">4</div>
    <div class="text">Lorem Ipsum</div>
</div>

当我单击标题 2 时，我想知道该标题之前是否有可见的 $('.wrapper') 。

Answer 1

我希望这就是您所需要的。

$(".title").click(function(){
  if($(this).parent().prev().is(":visible")) alert("Previous is visible!")
});

这会告诉您之前的 .wrapper （单击的标题之前）是否可见。

编辑：这解决了您更新的问题

$(".title").click(function(){
  if($(this).parent().prevAll(".wrapper").is(":visible")) alert("Previous is visible!")
});

希望这有帮助。干杯

Answer 2

总结一下。您需要检查在单击的元素之前是否存在任何具有“wrapper”类的可见元素。

如果是这样的话，应该可以做到这一点。

$(".wrapper").click(function() {
  var el;
  el = $(this);
  $(".wrapper:visible").each(function(index) {
    if ( el.get(0) === $(this).get(0) ) {
      alert("There are no visible wrappers prior to this one.");
      return false;
    } else {
      alert("There are visible wrappers prior to this one.");
      return false;
    }
  });
});

或者：

$(".wrapper").click(function() {
  if ( $(this).prevAll(".wrapper:visible").length ) {
    return alert("There is " + $(this).prevAll(".wrapper:visible").length  + " wrappers prior to this one.");
  } else {
    return alert("There are no visible wrappers prior to this one.");
  }
});

Answer 3

$(this).parent("div:visible")

仅当父级可见时，它才会为您提供父级。

Answer 4

$(this).closest('.wrapper').prev().is(':visible');

将获得带有类 wrapper 的最接近的父级，这意味着即使 $(this) 位于包装器内部较深处，它仍然可以正常运行。

Answer 5

如果您想查看是否有任何以前可见的包装纸......
$(this).parent().prev(".wrapper:visible").length()

如果您想查看是否只有前一个可见...
$(this).parent().prev().is(":visible")

Answer 6

$('.title').click(function() {
    if ($(this).parent().prev('.wrapper:visible').length) {
        console.log('visible');
    } else {
        console.log('not visible');
    }
});