Question

我正在使用一组具有列表视图（默认）和网格视图的元素。我使用无序列表伪造表视图，因此我可以切换到网格视图而无需创建不同的标记。（我想避免在整个地方使用绝对定位的元素）

列表视图

<ul class="list">
<li class="header">
    <div class="image">Image</div>
    <h2 class="name">Name</h2>
    <p class="date">Start Date</p>
    <p class="title">Title</p>
</li>
<li class="even">
    <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
    <h2 class="name">Adam Ant</h2>
    <p class="date">1995</p>
    <p class="title">Specialist</p>
</li>
<li class="odd">
    <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
    <h2 class="name">Brian Box</h2>
    <p class="date">2005</p>
    <p class="title">Specialist</p>
</li>
<li class="even">
    <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
    <h2 class="name">Clara Clock</h2>
    <p class="date">2010</p>
    <p class="title">Manager</p>
</li>
<li class="odd">
    <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
    <h2 class="name">Darla Dock</h2>
    <p class="date">1996</p>
    <p class="title">Editor</p>
</li>

网格视图

<ul class="grid">
<li class="header">
   <p class="title">Title</p>
    <div class="image">Image</div>
    <h2 class="name">Name</h2>
    <p class="date">Start Date</p>

</li>
<li class="even">
   <p class="title">Specialist</p>
    <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
    <h2 class="name">Adam Ant</h2>
    <p class="date">1995</p>

</li>
<li class="odd">
    <p class="title">Specialist</p>
    <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
    <h2 class="name">Brian Box</h2>
    <p class="date">2005</p>

</li>
<li class="even">
    <p class="title">Manager</p>
    <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
    <h2 class="name">Clara Clock</h2>
    <p class="date">2010</p>

</li>
<li class="odd">
<p class="title">Editor</p>
    <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div>
    <h2 class="name">Darla Dock</h2>
    <p class="date">1996</p>

</li>

棘手的部分是列表视图中元素的顺序与网格视图中的顺序不同。所以我使用prependTo来定位一些元素，并在视图切换到网格视图后更改顺序。它到目前为止工作正常。问题是，一旦视图再次切换回列表视图，元素将不会返回其原始顺序。

我想用小提琴更容易看到：http://jsfiddle.net/tDF7A/

这是我用来切换视图并添加.title元素的javascript代码，以便它显示在.image元素之前。

$('.controls a').bind('click', function(){
$('.controls a').toggleClass('active');
$('ul').toggleClass('list').toggleClass('grid');
$('ul.grid li').each(function () {
    var $this = $(this);
    $('.title', $this).prependTo($this);
});

}）;

如您所见，图像元素在列表视图中排在第一位，在网格视图中位于第二位，但是一旦您尝试切换回列表视图，图像就会保留在第二位并且不会返回到第一位它应该是。我知道用jquery实现这可能很简单。我最近才开始摆弄它，所以我被困在这里。我将不胜感激任何帮助。提前谢谢。

Answer 1

如果它具有与网格类一样的列表类，则可以appendTo。 appendTo会将标题放回到最后的状态。

喜欢这个

$('ul.list li').each(function () {
    var $this = $(this);
    $('.title', $this).appendTo($this); 
});

这里是完整的代码。这是一个更新的fiddle。

$('.controls a').bind('click', function(){
    $('.controls a').toggleClass('active');
    $('ul').toggleClass('list').toggleClass('grid');

    $('ul.grid li').each(function () {
        var $this = $(this);
        $('.title', $this).prependTo($this);
    });    

    $('ul.list li').each(function () {
        var $this = $(this);
        $('.title', $this).appendTo($this); 
    });
});

Answer 2

在切换到网格视图时使用prependTo时，必须在切换回列表视图时还原该更改。所以你需要恢复这个改变：

$('.controls a').bind('click', function(){
    $('.controls a').toggleClass('active');
    $('ul').toggleClass('list').toggleClass('grid');
    $('ul.grid li').each(function () {
        var $this = $(this);
        $('.title', $this).prependTo($this);
    });   
    $('ul.list li').each(function () {
        var $this = $(this);
        $('.image', $this).prependTo($this);
    });  
});

这是更新的FIDDLE。

使用jQuery切换视图时切换元素顺序

2 个答案: