Question

我想使用JQuery的prev（）方法从我给| col1 | col2 | |------+------| | a | 3 | | b | | | c | | | | | |------+------| #+TBLFM: @2$2=vlen(@-I$1..@+I$1)类的那个中选择前一个li项并删除它的边框。然而，它不起作用。这是FIDDLE。

我的代码：

HTML

current

CSS

  <nav id="nav">
    <ul id="navlist">
      <a href="about.php"><li class="navitem">About</li></a>
      <a href="portfolio.php"><li class="navitem">Portfolio</li></a>
      <a href="blog.php"><li class="navitem">Blog</li></a>
      <a href="contact.php"><li class="navitem current">Contact</li></a>
    </ul>
  </nav>

JAVASCRIPT

#navlist {
  position: relative;
  top: 12px;
}
#navlist a {
  color: #190912;
}
.navitem {
  display: block;
  width: 50%;
  margin: 0 auto;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.25rem;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 2px solid #440b2e;
}
.current {
  border: 4px solid #440b2e;
  background-color: #966b9d;
  color: #f2f2ed;
}

我正在使用JQuery 1.11.X.谢谢。

Answer 1

您的HTML无效。只有li元素可以是ul的直接后代，因此a应位于li内。一旦你解决了这个问题，你的代码应该可以正常工作。

<nav id="nav">
    <ul id="navlist">
        <li class="navitem"><a href="about.php">About</a></li>
        <li class="navitem"><a href="portfolio.php">Portfolio</a></li>
        <li class="navitem"><a href="blog.php">Blog</a></li>
        <li class="navitem current"><a href="contact.php">Contact</a></li>
    </ul>
</nav>

Updated fiddle

Answer 2

你必须放一个这样的有效标记：

＆＃13;

$(function() {
  $("li.current").prev().css("border", "none");
});

＆＃13;

#navlist {
  position: relative;
  top: 12px;
}
#navlist a {
  color: #190912;
}
.navitem {
  display: block;
  width: 50%;
  margin: 0 auto;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.25rem;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 2px solid #440b2e;
}
.current {
  border: 4px solid #440b2e;
  background-color: #966b9d;
  color: #f2f2ed;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
  <ul id="navlist">
    <li class="navitem"><a href="about.php">About</a></li>
    <li class="navitem"><a href="portfolio.php">Portfolio</a></li>
    <li class="navitem"><a href="blog.php">Blog</a></li>
    <li class="navitem current"><a href="contact.php">Contact</a></li>
  </ul>
</nav>

＆＃13;

和js似乎是有效的，因为li现在有一个以前的兄弟项目。

Answer 3

我认为问题是您的HTML格式不正确。 ul标签只允许在其中包含li。你在ul里面有<a>个标签。

JQuery prev（）方法的问题

3 个答案: