基于JQ的图书类别选择界面共30分包括小说、文艺、知音、少儿、生活、社科、广利、美女、儿童、老人、少年、青年、成年、女人、父亲、母亲、妹妹、其他且可简化还要显示图书序号序号从1000开始一行三个图书显示边框

HTML代码：

<div class="book-category">
  <div class="book-item">1000 小说</div>
  <div class="book-item">1001 文艺</div>
  <div class="book-item">1002 知音</div>
  <div class="book-item">1003 少儿</div>
  <div class="book-item">1004 生活</div>
  <div class="book-item">1005 社科</div>
  <div class="book-item">1006 广利</div>
  <div class="book-item">1007 美女</div>
  <div class="book-item">1008 儿童</div>
  <div class="book-item">1009 老人</div>
  <div class="book-item">1010 少年</div>
  <div class="book-item">1011 青年</div>
  <div class="book-item">1012 成年</div>
  <div class="book-item">1013 女人</div>
  <div class="book-item">1014 父亲</div>
  <div class="book-item">1015 母亲</div>
  <div class="book-item">1016 妹妹</div>
  <div class="book-item">1017 其他</div>
</div>

CSS代码：

.book-category {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.book-item {
  width: 30%;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

jQuery代码：

$(function() {
  // 获取图书项
  var bookItems = $('.book-item');
  // 遍历图书项，添加序号
  bookItems.each(function(index) {
    var bookNum = 1000 + index;
    $(this).prepend(bookNum + ' ');
  });
});
``