Question

我尝试在每次点击时在列表上显示10个元素，但它始终显示所有列表，是否也可以使用纯CSS或JavaScript来完成？

我正在尝试显示有限的数字，因为当列表数超过1000个元素时，页面会变得负担重，因此我认为这是使客户端更快的最佳方法。

$('ul li:nth-child(n+11)').hide()
$('button').click(function(){
  $('ul li:nth-child(n+11)').show();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
</ul>
<button>more</button>

Answer 1

使用index并将其增加11，每次单击也可使用它来为nth-child选择hide/show

var i=11;
$('ul li:nth-child(n+' + i +')').hide();
$('button').click(function(){
  $('ul li:nth-child(n+' + i +')').show();
  i+=11;
  $('ul li:nth-child(n+' + i +')').hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
</ul>
<button>more</button>

Answer 2

您可以选择前10个不可见的项目并显示它们

$('ul li:nth-child(n+11)').hide()
$('button').click(function(){
  $('ul li:not(:visible):lt(10)').show();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <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>0</li>
  <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>0</li>
  <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>0</li>
  <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>0</li>
  <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>0</li>
  <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>0</li>
</ul>
<button>more</button>

Answer 3

我已经以10为增量对原始数组进行了分块，然后跟踪visibleIndex作为要显示分块数组的哪一部分的参考。

const $container = $('ul')
const items = Array.from($('ul li'))
let chunk = 10
let visibleIndex = 0

const chunked = items.map((item, index) => {
  if (index % chunk === 0) return items.slice(index, index+chunk)
}).filter(Boolean)

const reveal = () => {
  $container.empty()
  const itemList = chunked.reduce((prev, curr, i) => {
    if (i <= visibleIndex) {
      return [...prev, ...curr]
    }
    return prev
  }, [])
  
  $container.append(itemList)
}

$('button').click(() => {
  visibleIndex += 1
  reveal()
})

reveal()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>more</button>
<ul>

<li>x1</li><li>x2</li><li>x3</li><li>x4</li><li>x5</li><li>x6</li><li>x7</li><li>x8</li><li>x9</li><li>x10</li><li>x11</li><li>x12</li><li>x13</li><li>x14</li><li>x15</li><li>x16</li><li>x17</li><li>x18</li><li>x19</li><li>x20</li><li>x21</li><li>x22</li><li>x23</li><li>x24</li><li>x25</li><li>x26</li><li>x27</li><li>x28</li><li>x29</li><li>x30</li><li>x31</li><li>x32</li><li>x33</li><li>x34</li><li>x35</li><li>x36</li><li>x37</li><li>x38</li><li>x39</li><li>x40</li><li>x41</li><li>x42</li><li>x43</li><li>x44</li><li>x45</li><li>x46</li><li>x47</li><li>x48</li><li>x49</li><li>x50</li><li>x51</li><li>x52</li><li>x53</li><li>x54</li><li>x55</li><li>x56</li><li>x57</li><li>x58</li><li>x59</li><li>x60</li><li>x61</li><li>x62</li><li>x63</li><li>x64</li><li>x65</li><li>x66</li><li>x67</li><li>x68</li><li>x69</li><li>x70</li><li>x71</li><li>x72</li><li>x73</li><li>x74</li><li>x75</li><li>x76</li><li>x77</li><li>x78</li><li>x79</li><li>x80</li><li>x81</li><li>x82</li><li>x83</li><li>x84</li><li>x85</li><li>x86</li><li>x87</li><li>x88</li><li>x89</li><li>x90</li><li>x91</li><li>x92</li><li>x93</li><li>x94</li><li>x95</li><li>x96</li><li>x97</li><li>x98</li><li>x99</li><li>x100</li><li>x101</li><li>x102</li><li>x103</li><li>x104</li><li>x105</li><li>x106</li><li>x107</li><li>x108</li><li>x109</li><li>x110</li><li>x111</li><li>x112</li><li>x113</li><li>x114</li><li>x115</li><li>x116</li><li>x117</li><li>x118</li><li>x119</li><li>x120</li><li>x121</li><li>x122</li><li>x123</li><li>x124</li><li>x125</li><li>x126</li><li>x127</li><li>x128</li><li>x129</li><li>x130</li><li>x131</li><li>x132</li><li>x133</li><li>x134</li><li>x135</li><li>x136</li><li>x137</li><li>x138</li><li>x139</li><li>x140</li><li>x141</li><li>x142</li><li>x143</li><li>x144</li><li>x145</li><li>x146</li><li>x147</li><li>x148</li><li>x149</li><li>x150</li><li>x151</li><li>x152</li><li>x153</li><li>x154</li><li>x155</li><li>x156</li><li>x157</li><li>x158</li><li>x159</li><li>x160</li><li>x161</li><li>x162</li><li>x163</li><li>x164</li><li>x165</li><li>x166</li><li>x167</li><li>x168</li><li>x169</li><li>x170</li><li>x171</li><li>x172</li><li>x173</li><li>x174</li><li>x175</li><li>x176</li><li>x177</li><li>x178</li><li>x179</li><li>x180</li><li>x181</li><li>x182</li><li>x183</li><li>x184</li><li>x185</li><li>x186</li><li>x187</li><li>x188</li><li>x189</li><li>x190</li><li>x191</li><li>x192</li><li>x193</li><li>x194</li><li>x195</li><li>x196</li><li>x197</li><li>x198</li><li>x199</li><li>x200</li><li>x201</li><li>x202</li><li>x203</li><li>x204</li><li>x205</li><li>x206</li><li>x207</li><li>x208</li><li>x209</li><li>x210</li><li>x211</li><li>x212</li><li>x213</li><li>x214</li><li>x215</li><li>x216</li><li>x217</li><li>x218</li><li>x219</li><li>x220</li><li>x221</li><li>x222</li><li>x223</li><li>x224</li><li>x225</li><li>x226</li><li>x227</li><li>x228</li><li>x229</li><li>x230</li><li>x231</li><li>x232</li><li>x233</li><li>x234</li><li>x235</li><li>x236</li><li>x237</li><li>x238</li><li>x239</li><li>x240</li><li>x241</li><li>x242</li><li>x243</li><li>x244</li><li>x245</li><li>x246</li><li>x247</li><li>x248</li><li>x249</li><li>x250</li><li>x251</li><li>x252</li><li>x253</li><li>x254</li><li>x255</li><li>x256</li><li>x257</li><li>x258</li><li>x259</li><li>x260</li><li>x261</li><li>x262</li><li>x263</li><li>x264</li><li>x265</li><li>x266</li><li>x267</li><li>x268</li><li>x269</li><li>x270</li><li>x271</li><li>x272</li><li>x273</li><li>x274</li><li>x275</li><li>x276</li><li>x277</li><li>x278</li><li>x279</li><li>x280</li><li>x281</li><li>x282</li><li>x283</li><li>x284</li><li>x285</li><li>x286</li><li>x287</li><li>x288</li><li>x289</li><li>x290</li><li>x291</li><li>x292</li><li>x293</li><li>x294</li><li>x295</li><li>x296</li><li>x297</li><li>x298</li><li>x299</li><li>x300</li><li>x301</li><li>x302</li><li>x303</li><li>x304</li><li>x305</li><li>x306</li><li>x307</li><li>x308</li><li>x309</li><li>x310</li><li>x311</li><li>x312</li><li>x313</li><li>x314</li><li>x315</li><li>x316</li><li>x317</li><li>x318</li><li>x319</li><li>x320</li><li>x321</li><li>x322</li><li>x323</li><li>x324</li><li>x325</li><li>x326</li><li>x327</li><li>x328</li><li>x329</li><li>x330</li><li>x331</li><li>x332</li><li>x333</li><li>x334</li><li>x335</li><li>x336</li><li>x337</li><li>x338</li><li>x339</li><li>x340</li><li>x341</li><li>x342</li><li>x343</li><li>x344</li><li>x345</li><li>x346</li><li>x347</li><li>x348</li><li>x349</li><li>x350</li><li>x351</li><li>x352</li><li>x353</li><li>x354</li><li>x355</li><li>x356</li><li>x357</li><li>x358</li><li>x359</li><li>x360</li><li>x361</li><li>x362</li><li>x363</li><li>x364</li><li>x365</li><li>x366</li><li>x367</li><li>x368</li><li>x369</li><li>x370</li><li>x371</li><li>x372</li><li>x373</li><li>x374</li><li>x375</li><li>x376</li><li>x377</li><li>x378</li><li>x379</li><li>x380</li><li>x381</li><li>x382</li><li>x383</li><li>x384</li><li>x385</li><li>x386</li><li>x387</li><li>x388</li><li>x389</li><li>x390</li><li>x391</li><li>x392</li><li>x393</li><li>x394</li><li>x395</li><li>x396</li><li>x397</li><li>x398</li><li>x399</li><li>x400</li><li>x401</li><li>x402</li><li>x403</li><li>x404</li><li>x405</li><li>x406</li><li>x407</li><li>x408</li><li>x409</li><li>x410</li><li>x411</li><li>x412</li><li>x413</li><li>x414</li><li>x415</li><li>x416</li><li>x417</li><li>x418</li><li>x419</li><li>x420</li><li>x421</li><li>x422</li><li>x423</li><li>x424</li><li>x425</li><li>x426</li><li>x427</li><li>x428</li><li>x429</li><li>x430</li><li>x431</li><li>x432</li><li>x433</li><li>x434</li><li>x435</li><li>x436</li><li>x437</li><li>x438</li><li>x439</li><li>x440</li><li>x441</li><li>x442</li><li>x443</li><li>x444</li><li>x445</li><li>x446</li><li>x447</li><li>x448</li><li>x449</li><li>x450</li><li>x451</li><li>x452</li><li>x453</li><li>x454</li><li>x455</li><li>x456</li><li>x457</li><li>x458</li><li>x459</li><li>x460</li><li>x461</li><li>x462</li><li>x463</li><li>x464</li><li>x465</li><li>x466</li><li>x467</li><li>x468</li><li>x469</li><li>x470</li><li>x471</li><li>x472</li><li>x473</li><li>x474</li><li>x475</li><li>x476</li><li>x477</li><li>x478</li><li>x479</li><li>x480</li><li>x481</li><li>x482</li><li>x483</li><li>x484</li><li>x485</li><li>x486</li><li>x487</li><li>x488</li><li>x489</li><li>x490</li><li>x491</li><li>x492</li><li>x493</li><li>x494</li><li>x495</li><li>x496</li><li>x497</li><li>x498</li><li>x499</li><li>x500</li><li>x501</li><li>x502</li><li>x503</li><li>x504</li><li>x505</li><li>x506</li><li>x507</li><li>x508</li><li>x509</li><li>x510</li><li>x511</li><li>x512</li><li>x513</li><li>x514</li><li>x515</li><li>x516</li><li>x517</li><li>x518</li><li>x519</li><li>x520</li><li>x521</li><li>x522</li><li>x523</li><li>x524</li><li>x525</li><li>x526</li><li>x527</li><li>x528</li><li>x529</li><li>x530</li><li>x531</li><li>x532</li><li>x533</li><li>x534</li><li>x535</li><li>x536</li><li>x537</li><li>x538</li><li>x539</li><li>x540</li><li>x541</li><li>x542</li><li>x543</li><li>x544</li><li>x545</li><li>x546</li><li>x547</li><li>x548</li><li>x549</li><li>x550</li><li>x551</li><li>x552</li><li>x553</li><li>x554</li><li>x555</li><li>x556</li><li>x557</li><li>x558</li><li>x559</li><li>x560</li><li>x561</li><li>x562</li><li>x563</li><li>x564</li><li>x565</li><li>x566</li><li>x567</li><li>x568</li><li>x569</li><li>x570</li><li>x571</li><li>x572</li><li>x573</li><li>x574</li><li>x575</li><li>x576</li><li>x577</li><li>x578</li><li>x579</li><li>x580</li><li>x581</li><li>x582</li><li>x583</li><li>x584</li><li>x585</li><li>x586</li><li>x587</li><li>x588</li><li>x589</li><li>x590</li><li>x591</li><li>x592</li><li>x593</li><li>x594</li><li>x595</li><li>x596</li><li>x597</li><li>x598</li><li>x599</li><li>x600</li><li>x601</li><li>x602</li><li>x603</li><li>x604</li><li>x605</li><li>x606</li><li>x607</li><li>x608</li><li>x609</li><li>x610</li><li>x611</li><li>x612</li><li>x613</li><li>x614</li><li>x615</li><li>x616</li><li>x617</li><li>x618</li><li>x619</li><li>x620</li><li>x621</li><li>x622</li><li>x623</li><li>x624</li><li>x625</li><li>x626</li><li>x627</li><li>x628</li><li>x629</li><li>x630</li><li>x631</li><li>x632</li><li>x633</li><li>x634</li><li>x635</li><li>x636</li><li>x637</li><li>x638</li><li>x639</li><li>x640</li><li>x641</li><li>x642</li><li>x643</li><li>x644</li><li>x645</li><li>x646</li><li>x647</li><li>x648</li><li>x649</li><li>x650</li><li>x651</li><li>x652</li><li>x653</li><li>x654</li><li>x655</li><li>x656</li><li>x657</li><li>x658</li><li>x659</li><li>x660</li><li>x661</li><li>x662</li><li>x663</li><li>x664</li><li>x665</li><li>x666</li><li>x667</li><li>x668</li><li>x669</li><li>x670</li><li>x671</li><li>x672</li><li>x673</li><li>x674</li><li>x675</li><li>x676</li><li>x677</li><li>x678</li><li>x679</li><li>x680</li><li>x681</li><li>x682</li><li>x683</li><li>x684</li><li>x685</li><li>x686</li><li>x687</li><li>x688</li><li>x689</li><li>x690</li><li>x691</li><li>x692</li><li>x693</li><li>x694</li><li>x695</li><li>x696</li><li>x697</li><li>x698</li><li>x699</li><li>x700</li><li>x701</li><li>x702</li><li>x703</li><li>x704</li><li>x705</li><li>x706</li><li>x707</li><li>x708</li><li>x709</li><li>x710</li><li>x711</li><li>x712</li><li>x713</li><li>x714</li><li>x715</li><li>x716</li><li>x717</li><li>x718</li><li>x719</li><li>x720</li><li>x721</li><li>x722</li><li>x723</li><li>x724</li><li>x725</li><li>x726</li><li>x727</li><li>x728</li><li>x729</li><li>x730</li><li>x731</li><li>x732</li><li>x733</li><li>x734</li><li>x735</li><li>x736</li><li>x737</li><li>x738</li><li>x739</li><li>x740</li><li>x741</li><li>x742</li><li>x743</li><li>x744</li><li>x745</li><li>x746</li><li>x747</li><li>x748</li><li>x749</li><li>x750</li><li>x751</li><li>x752</li><li>x753</li><li>x754</li><li>x755</li><li>x756</li><li>x757</li><li>x758</li><li>x759</li><li>x760</li><li>x761</li><li>x762</li><li>x763</li><li>x764</li><li>x765</li><li>x766</li><li>x767</li><li>x768</li><li>x769</li><li>x770</li><li>x771</li><li>x772</li><li>x773</li><li>x774</li><li>x775</li><li>x776</li><li>x777</li><li>x778</li><li>x779</li><li>x780</li><li>x781</li><li>x782</li><li>x783</li><li>x784</li><li>x785</li><li>x786</li><li>x787</li><li>x788</li><li>x789</li><li>x790</li><li>x791</li><li>x792</li><li>x793</li><li>x794</li><li>x795</li><li>x796</li><li>x797</li><li>x798</li><li>x799</li><li>x800</li><li>x801</li><li>x802</li><li>x803</li><li>x804</li><li>x805</li><li>x806</li><li>x807</li><li>x808</li><li>x809</li><li>x810</li><li>x811</li><li>x812</li><li>x813</li><li>x814</li><li>x815</li><li>x816</li><li>x817</li><li>x818</li><li>x819</li><li>x820</li><li>x821</li><li>x822</li><li>x823</li><li>x824</li><li>x825</li><li>x826</li><li>x827</li><li>x828</li><li>x829</li><li>x830</li><li>x831</li><li>x832</li><li>x833</li><li>x834</li><li>x835</li><li>x836</li><li>x837</li><li>x838</li><li>x839</li><li>x840</li><li>x841</li><li>x842</li><li>x843</li><li>x844</li><li>x845</li><li>x846</li><li>x847</li><li>x848</li><li>x849</li><li>x850</li><li>x851</li><li>x852</li><li>x853</li><li>x854</li><li>x855</li><li>x856</li><li>x857</li><li>x858</li><li>x859</li><li>x860</li><li>x861</li><li>x862</li><li>x863</li><li>x864</li><li>x865</li><li>x866</li><li>x867</li><li>x868</li><li>x869</li><li>x870</li><li>x871</li><li>x872</li><li>x873</li><li>x874</li><li>x875</li><li>x876</li><li>x877</li><li>x878</li><li>x879</li><li>x880</li><li>x881</li><li>x882</li><li>x883</li><li>x884</li><li>x885</li><li>x886</li><li>x887</li><li>x888</li><li>x889</li><li>x890</li><li>x891</li><li>x892</li><li>x893</li><li>x894</li><li>x895</li><li>x896</li><li>x897</li><li>x898</li><li>x899</li><li>x900</li><li>x901</li><li>x902</li><li>x903</li><li>x904</li><li>x905</li><li>x906</li><li>x907</li><li>x908</li><li>x909</li><li>x910</li><li>x911</li><li>x912</li><li>x913</li><li>x914</li><li>x915</li><li>x916</li><li>x917</li><li>x918</li><li>x919</li><li>x920</li><li>x921</li><li>x922</li><li>x923</li><li>x924</li><li>x925</li><li>x926</li><li>x927</li><li>x928</li><li>x929</li><li>x930</li><li>x931</li><li>x932</li><li>x933</li><li>x934</li><li>x935</li><li>x936</li><li>x937</li><li>x938</li><li>x939</li><li>x940</li><li>x941</li><li>x942</li><li>x943</li><li>x944</li><li>x945</li><li>x946</li><li>x947</li><li>x948</li><li>x949</li><li>x950</li><li>x951</li><li>x952</li><li>x953</li><li>x954</li><li>x955</li><li>x956</li><li>x957</li><li>x958</li><li>x959</li><li>x960</li><li>x961</li><li>x962</li><li>x963</li><li>x964</li><li>x965</li><li>x966</li><li>x967</li><li>x968</li><li>x969</li><li>x970</li><li>x971</li><li>x972</li><li>x973</li><li>x974</li><li>x975</li><li>x976</li><li>x977</li><li>x978</li><li>x979</li><li>x980</li><li>x981</li><li>x982</li><li>x983</li><li>x984</li><li>x985</li><li>x986</li><li>x987</li><li>x988</li><li>x989</li><li>x990</li><li>x991</li><li>x992</li><li>x993</li><li>x994</li><li>x995</li><li>x996</li><li>x997</li><li>x998</li><li>x999</li>

</ul>

每次点击可显示10个元素

3 个答案: