3

CS S functionliを使用して数えたい要素の単純なリストがあります。counter() 

body       {counter-reset: quantity}
ul li      {counter-increment: quantity}
.sum:after {content: counter(quantity)}
<div class="mirror"></div>
<ul>
  <li>..</li>
  <li>..</li>
  <li>..</li>
  <li>..</li>
  <li>..</li>
</ul>
<div class="sum"></div>

問題は、カウンタがページの最後 ( .sum-の内側li) にある必要がありますが、その値をページの上部 ( .mirrororの内側.mirror:after) に表示する必要があることです。

jQueryソリューションを見つけようとしていますが、何も機能しません。:after 問題は疑似要素から値を取得することにあると思います。

4

3 に答える 3

1

DOM 内の要素の後に div を配置する必要があるため、Flexboxとプロパティorderを利用して、リスト項目の上にカウンターを表示することができます。.mirrorul

body {counter-reset: quantity}
ul li {counter-increment: quantity}

.flex-container {
  display: flex; /* assigned flex behavior to the parent wrapper so that you can take advantage of the order property / displays flex-items (children) inline by default, that's why you need to change its direction */
  flex-direction: column; /* now it stacks them vertically */
}

.flex-container > ul {
  order: 1; /* displays list items below the counter even though they are above it in the DOM / 1 because the .mirror div has the default value of 0 */
}

.mirror:after {
  content: counter(quantity);
}
<div class="flex-container">
  <ul>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
  </ul>
  <div class="mirror"></div>
</div>

于 2018-01-16T09:23:54.460 に答える
1

問題は、DOM が上から下に読み込まれ、:after擬似要素がその場で作成されることです。要素は実際に DOM に書き込まれるまで存在.mirror:afterしないため、単純な変更では期待どおりに動作しません。

body {
  counter-reset: quantity;
}

ul li {
  counter-increment: quantity;
}

.mirror:after {
  content: counter(quantity);
}
<body>
  <div class="mirror"></div>
  <ul>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
  </ul>
  <div class="sum"></div>
</body>

ただし、これは JavaScript を使用して回避でき、カウンターを出力する前にページの読み込みが完了するまで待機します。で要素を数えることができますdocument.querySelectorAll。これには単純なliセレクターを使用しましたが、必要に応じてより具体的にすることができます。

それらをクラスに挿入して戻すには、mirrorで選択しdocument.getElementsByClassName、 でアクセスし[0]ます。要素のNodeListコレクションを返し、最初の結果[0]が必要なため、が必要です。次に、次のように でコンテンツを設定するだけです。document.getElementsByClassName.innerHTML

var items = document.querySelectorAll('li');
var itemCount = items.length;

var mirror = document.getElementsByClassName('mirror')[0];
mirror.innerHTML = itemCount;
<div class="mirror"></div>

<ul>
  <li>..</li>
  <li>..</li>
  <li>..</li>
  <li>..</li>
  <li>..</li>
</ul>

<div class="sum"></div>

お役に立てれば！:)

于 2018-01-16T01:07:11.773 に答える