$(element:visible) before or after $(this)

How do I determine if $(element:visible) is placed before or after $(this) in HTML?

My HTML code looks like this

<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>

When I click on title 2 I want to know if there is visible $('.wrapper') before that title.

I hope this is what you need

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

This tells you if the previous .wrapper (previous to clicked title) is visible.

EDIT: This solves your updated question

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

Hope this helps. Cheers

To sum it up. You need to check if there are any visible elements with class "wrapper" prior to clicked element.

If that is it, this should do it.

$(".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;
    }
  });
});

Or:

$(".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.");
  }
});

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

This will give you a parent only if it is visible.

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

Will get the closest parent with a class wrapper meaning even if $(this) is deeper inside the wrapper it will still function properly.

If you are looking to see if there is ANY previous visible wrappers... $(this).parent().prev(".wrapper:visible").length()

If you are looking to see if only the previous one before it is visible... $(this).parent().prev().is(":visible")

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