使用 chui.js $.当有两个列表时，UI 可访问

我为此代码使用 chui.js （http://chocolatechip-ui.com） 框架

http://jsfiddle.net/qhoc/fjKx3/2/

它应该是 2 个屏幕：左边的屏幕可以使用 $.UISlideout() 滑出。我只想为左侧屏幕使用"编辑"按钮，但似乎$.UIDeletable应用于两个屏幕中的两个列表。

HTML：

<nav>
  <h1>Page Name</h1>
</nav>
<article>
  <section>
    <ul class='list'>
      <li class='comp'>
        <aside>
          <img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
        </aside>
        <div>
          <h3>Item 1</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
        </div>
      </li>
      <li class='comp'>
        <aside>
          <img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
        </aside>
        <div>
          <h3>Item 2</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
        </div>
      </li>
      <li class='comp'>
        <aside>
          <img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
        </aside>
        <div>
          <h3>Item 3</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
        </div>
      </li>
      <li class='comp'>
        <aside>
          <img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
        </aside>
        <div>
          <h3>Kiss</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
        </div>
      </li>
      <li class='comp'>
        <aside>
          <img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
        </aside>
        <div>
          <h3>Item 4</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
        </div>
      </li>
    </ul>
  </section>
</article>
<div class='hidden' id='list-temp'>
  <h2>
    Your List
  </h2>
  <ul class='list' id='my-list'>
    <li>
      <h3>Item A</h3>
    </li>
    <li>
      <h3>Item B</h3>
    </li>
    <li>
      <h3>Item C</h3>
    </li>
    <li>
      <h3>Item D</h3>
    </li>
  </ul>
</div>

.JS：

$(function() {
    $.UISlideout();
    $('.slide-out > section').append($('#list-temp').html());
    $.UIDeletable({
        list: '.list', 
        callback: function(item) {
            var text = $(item).siblings('h3').text();
            console.log(text);
        }
    });
});

我试图将左侧列表更改为某些 #id 并选择它。还是不行。

有什么帮助吗？