Question

我在父div内有一堆div，其结构如下：

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>
    <div id="div7"></div>
    <div id="div8"></div>
    <div id="div9"></div>
    <div id="div10"></div>
</div>

有什么方法可以使用JS或jQuery控制页面加载时显示的子div数量。理想情况下，我只想显示前5个并将其他子div设置为

.css('display', 'none')

这怎么办？

Answer 1

您可以使用static List<List<String>> tableValues;选择器来选择索引大于特殊数字的元素。

    btnEnter.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent arg0) {
            String date = textField_3.getText();
            //JTable table = new JTable();
            //JScrollPane tableContainer = new JScrollPane(table);
            try {
                tableValues = Inserts.search(date,3);  //table is filled
                for(List<String> value :  tableValues) {
                    System.out.println(value);
                }
            //table.setVisible(true);
            //panel_7.add(tableContainer, BorderLayout.CENTER); --> I want to add the table to a Panel
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    });

:gt()

您还可以使用纯JavaScript来完成这项工作。

$("#container div:gt(4)").hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
  <div id="div4">div4</div>
  <div id="div5">div5</div>
  <div id="div6">div6</div>
  <div id="div7">div7</div>
  <div id="div8">div8</div>
  <div id="div9">div9</div>
  <div id="div10">div10</div>
</div>

document.querySelectorAll("#container div").forEach(function(ele, i){
  i > 4 ? ele.style.display = "none" : '';
})

Answer 2

这可以不用JS而使用CSS的nth-child选择器来完成：

#container div:nth-child(n+6) { /* upto but not including 6th child */
  display: none;
}

<div id="container">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
    <div id="div7">7</div>
    <div id="div8">8</div>
    <div id="div9">9</div>
    <div id="div10">10</div>
</div>

Answer 3

看看jquery的每个功能

let x = 5;
$(`#container`).find('div').each((index, element) => {
  // typeof index = number
  // typeof element = HTMLElement (not JQuery)
  if(index > x){
    $(element).css('display', 'none');
    // $(element).remove();
  }
});

Answer 4

您可以为要在页面加载时隐藏的div添加CSS。

let x = 5;
$("#container div:lt("+x+")").css('display','none') // on load
$("#show").on("click",function(){
 $("#container div:lt("+x+")").css('display','block');
 $(this).hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="container">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
    <div id="div7">7</div>
    <div id="div8">8</div>
    <div id="div9">9</div>
    <div id="div10">10</div>
</div>

<input type="button" value="show now" id="show" />

Answer 5

您甚至不需要JS / jQuery。简单的CSS nth-child将起作用。但是，如果需要，可以将其与JS代码结合使用，即-动态设置它。我不确定您以后的目标是什么，但是只需“选择”并使用纯CSS在第五位之后隐藏所有元素，就像这样：

#container div:nth-child(n+6) {
  display: none;
}

如何使用JavaScript / jQuery在页面加载时显示X数量的子div？

5 个答案: