简单:移除<使用classname，然后将这个类名添加到下一个(或当前)< light >

Simple: Remove <li> with classname, then add this classname to next (or current) <li>

本文关键字：下一个 添加 light classname 使用 移除 然后 简单      更新时间：2023-09-26

我在滑块中有一个图像列表，如下所示:

<ul>
    <li class="dd">one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

有一个按钮删除<li>类"dd"，所以我有这个功能继续:

function delete(){
    $('li.dd').remove();
}

所以现在特定的<li>被删除了，我想要类"dd"被添加到我当前在的<li>上。我试着添加这个:

function delete(){
    $('li.dd').remove();
    $('li').addClass(' dd')
}

但是正如您所看到的，它所做的只是将类添加到所有现有的<li> s中，这意味着如果我再次选择单击删除按钮，整个列表将被删除。

我有一支笔正在写我所拥有的:

http://codepen.io/anon/pen/gpNwGp

提前感谢!

因为你添加类的所有元素，所有的li s将被删除在下一次点击。您可以使用以下方法将类只添加到第一个 li。

您可以使用:first伪选择器来选择第一个元素。

function delete() {
    $('li.dd').remove();
    $('li:first').addClass('dd');
    //   ^^^^^^
}

你也可以使用first()来获取第一个元素

function delete() {
    $('li.dd').remove();
    $('li').first().addClass('dd');
    //     ^^^^^^^^
}

可以查看更新后的codepen Demo

您可以使用jQuery方法使其更干净

function toggleSlide(direction) {
  var $visible = $('.slider > li:visible').hide();
  var $ft = $visible[direction ? 'next' : 'prev']();
  if (!$ft.length) {
    $ft = $('.slider > li')[direction ? 'first' : 'last']();
  }
  $ft.show();
  setIndex();
}
function getVisible() {
  return $('.slider > li:visible').index() + 1;
}
function goToEdge(where) {
  $('.slider > li:visible').hide();
  $('.slider > li')[where ? 'last' : 'first']().show();
  setIndex();
}
function addSlide() {
  $('ul.slider').append('<li class="hideable"><img src="http://placehold.it/700x100" alt="Sunset" /></li>');
}
function deleteSlide() {
  var $visible = $('.slider > li:visible');
  toggleSlide(true);
  $visible.remove();
}
function setIndex() {
  $('#slideNumber').text(getVisible())
}
setIndex();
.hideable {
  display: none;
}
img {
  width: 640px;
  height: 480px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="slider" style="list-style-type:none; margin-left:-2em;">
  <li class="hideable dd" style="display: block;">
    <img src="http://placehold.it/100x100" alt="hinterground" />
  </li>
  <li class="hideable">
    <img src="http://placehold.it/200x100" alt="Berries" />
  </li>
  <li class="hideable">
    <img src="http://placehold.it/300x100" alt="Cheetah" />
  </li>
  <li class="hideable">
    <img src="http://placehold.it/400x100" alt="Fence" />
  </li>
  <li class="hideable">
    <img src="http://placehold.it/500x100" alt="Paper" />
  </li>
  <li class="hideable">
    <img src="http://placehold.it/600x100" alt="Sunset" />
  </li>
  <!-- ... and so on -->
</ul>
<!-- Buttons to go back and forth between slides. -->
<form>
  <input type="button" id="firstButton" value="First" onclick="goToEdge(false)" />
  <input type="button" value="Back" onclick="toggleSlide(false)" />
  <input type="button" value="Forward" onclick="toggleSlide(true)" />
  <input type="button" id="lastButton" value="Last" onclick="goToEdge(true)" />
  <input type="button" value="Add Slide" onclick="addSlide()" />
  <input type="button" value="Delete Slide" onclick="deleteSlide()" />
  <p>Slide
    <!-- you can change "Slide" to Page, Item, etc. --> <span id="slideNumber">
        </span>
  </p>
</form>

先保存下一个元素来添加class:

function delete(which) {
    var next_li = $('li.dd').next();
    $('li.dd').remove();
    next_li.addClass("dd");
}
我想这可能对你有帮助。
好运。

回忆!不要使用.first()，因为它提供了第一个dd类。

相关文章：