jQuery将激活的内容滚动到元素

我在一个员工页面上工作，其中员工照片在页面一侧的网格中，bios在另一侧的列中显示。我使用jQuery在单击staff时添加活动类，并使用.position设置生物定位的css。除了页面加载上的第一项之外，所有这些都非常有效。我已向第一个工作人员添加了一个active类，但我无法使.position在页面加载时正常工作。它似乎只对“点击”起作用

以下是我的jQuery：

jQuery(document).ready(function() {
  $('#team-list li a').click(function() {
    $('#team-list li').removeClass('active');
    $(this).parent().addClass('active');  
    var pos = $(this).parentsUntil('#team-list').position();
    var width = $(this).parent('#container').outerWidth();
    $("#team-list .active .bio").css({
      left: - + (pos.left + width) + "px"
    })
    return false;
  });
});

我已尝试在单独的函数中添加以下内容：

$(function() {
  var initialPos = $('#team-list').position();
  var initialWidth = $('#container').outerWidth();
  $("#team-list .active .bio").css({
    left: - + (initialPos.left + initialWidth) + "px"
  })
});

我已经使用.load和.ready在几个变体中尝试了这一点 这是一个wordpress站点，因此它必须以jQuerydocument.readyfunction开始

编辑：添加HTML

<div class="container">
  <div id="team-list">
    <ul>
      <li class="active">
        <a href="#">
              <img>
              <h3>Person 1</h3>
            </a>
        <div class="bio">
          <h3>Person 1</h3>
          <h4>President</h4>
          <p>
            Person 1 bio
          </p>
        </div>
      </li>
      <li>
        <a href="#">
              <img>
              <h3>Person 2</h3>
            </a>
        <div class="bio">
          <h3>Person 2</h3>
          <h4>Vice President</h4>
          <p>
            Person 2 bio
          </p>
        </div>
      </li>
      <li>
        <a href="#">
              <img>
              <h3>Person 3</h3>
            </a>
        <div class="bio">
          <h3>Person 3</h3>
          <h4>Secretary</h4>
          <p>
            Person 3 bio
          </p>
        </div>
      </li>
      <li>
        <a href="#">
              <img>
              <h3>Person 4</h3>
            </a>
        <div class="bio">
          <h3>Person 4</h3>
          <h4>COO</h4>
          <p>
            Person 4 bio
          </p>
        </div>
      </li>
      <li>
        <a href="#">
              <img>
              <h3>Person 5</h3>
            </a>
        <div class="bio">
          <h3>Person 5</h3>
          <h4>CEO</h4>
          <p>
            Person 5 bio
          </p>
        </div>
      </li>
      <li>
        <a href="#">
              <img>
              <h3>Person 6</h3>
            </a>
        <div class="bio">
          <h3>Person 6</h3>
          <h4>CFO</h4>
          <p>
            Person 6 bio
          </p>
        </div>
      </li>
    </ul>
  </div>

---

建立单击处理程序后，模拟对第一个项目的单击

jQuery(document).ready(function() {
  $('#team-list li a').click(function() {
    $('#team-list li').removeClass('active');
    $(this).parent().addClass('active');  
    var pos = $(this).parentsUntil('#team-list').position();
    var width = $(this).parent('#container').outerWidth();
    $("#team-list .active .bio").css({
      left: - + (pos.left + width) + "px"
    })
    return false;
  }).eq(0).click();
});

---

您还可以包含HTML的简短版本吗？就像在一个房间里？那太完美了！谢谢

jQuery(document).ready(function() {
  $('#team-list li a').click(function() {
    $('#team-list li').removeClass('active');
    $(this).parent().addClass('active');  
    var pos = $(this).parentsUntil('#team-list').position();
    var width = $(this).parent('#container').outerWidth();
    $("#team-list .active .bio").css({
      left: - + (pos.left + width) + "px"
    })
    return false;
  }).eq(0).click();
});