Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
243 views
in Technique[技术] by (71.8m points)

html - Switch positions of 2 divs with jQuery

I'm wondering if it's posible to switch positions of two divs with jQuery.

I have two div like this

<div class="div1">STUFF ONE</div>
<div class="div2">STUFF TWO</div>

so if div2 has content (or contains more than just white spaces) it switches the order of div1 and div2

so this:

<div class="div1">STUFF ONE</div>
<div class="div2">STUFF TWO</div>

would become this:

<div class="div2">STUFF TWO</div>
<div class="div1">STUFF ONE</div>

But if it was this:

<div class="div1">STUFF ONE</div>
<div class="div2"></div>

or this:

<div class="div1">STUFF ONE</div>
<div class="div2">    </div>

it wouldn't do anything.

Also... if posible, if switched I would like to add a class to div1.

Any help with this will be very much appreciated.

UPDATE:

I forgot to add that I have to run this across multipul instanses on the same page.

Each instance is formated like this:

<div class="view-container"> 
  <div class="view-content"> 
   <div class="views-row">
     <div class="div1">STUFF ONE</div>
     <div class="div2">STUFF TWO</div>
   </div>
   <div class="views-row">
     <div class="div1">STUFF ONE</div>
     <div class="div2">STUFF TWO</div>
   </div>
  </div>
</div>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I'll throw in my solution

$('.div2:parent').each(function () {
    $(this).insertBefore($(this).prev('.div1'));
});

Edit: Doesn't work for whitespace in div2. Here's an updated solution:

$('.div2').each(function () {
    if (!$(this).text().match(/^s*$/)) {
        $(this).insertBefore($(this).prev('.div1'));
    }
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...