Question

我需要jQuery脚本，该脚本将第4个li之后的所有元素包装为div，类为wrapper。第四li之后的元素数量不是固定的，可以是10或5。

您能帮我吗？谢谢！

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <div class="wrapper">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </div>
</ul>

Answer 1

private void Cbox_Changed_event(object sender, SelectionChangedEventArgs e)
        {
        //    string text = (e.AddedItems[0] as ComboBoxItem).Content as string;
        }
        private void Cbox_Load(object sender, RoutedEventArgs e)
        {
            List<string> zoomList = new List<string>();
            zoomList.Add("100");
            zoomList.Add("200");
            zoomList.Add("300");
            zoomList.Add("400");

            var comboBox = sender as ComboBox;
            comboBox.ItemsSource = zoomList;
            comboBox.Focusable = true;
        }

var lis = $("ul li"); lis.slice(4).wrapAll("<li class='wrapper'><ul></ul></li>");，这将从索引4开始选择li元素

lis.slice(4)会将包装元素包装在您所有的wrapAll元素周围。

Answer 2

正如罗里所说，您不能在列表中使用div（根据html标准），但是您可以这样做。

我制作了一个额外的空列表，并使用jquery的wrap函数对其进行了包装，并添加了一个wrapper类。然后，我使用index（）函数检查元素的位置，如果索引为4或更大，它将被移至第二个列表。

$('#list2').wrap('<div>').addClass('wrapper');

$('#list1').children().each(function(){
  if($(this).index() >= 4) {
    $(this).appendTo('#list2')
  }
});

.wrapper {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>


<ul id="list2">

</ul>

Answer 3

无论<li>在包装类中，都需要选择所有<li>。选择后，应用自动换行属性。

.wrapper li{
      word-wrap: break-word;
    }

Answer 4

也许您可以执行以下操作：

$(".the-button").click(function() {
  var val = 123; //Any value you want
  dynamicLi(val);
});


function dynamicLi(val) {
  $(".dynamic-list li").each(function() {
    if ($(this).hasClass("wrapper")) {
      $(this).find("ul").append("<li>" + val + "</li>");
    }
  });
}

.no-bullets {
  list-style-type: none;
  padding-left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dynamic-list no-bullets">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li class="wrapper">
    <ul class="no-bullets">
    </ul>
  </li>
</ul>

<button class="the-button">Add More</button>

如何在第4

4 个答案: