7

次のような要素がある場合:

<a href="something">A</a>
<a href="something_else">B</a>
<a href="something">A</a>
<a href="...">C</a>

私は次のようなものを使用できることを知っています

body
{
    counter-reset:section;
}

a:before
{
    counter-increment:section;
    content:counter(section)". ";
}

取得するため

1. A
2. B
3. A
4. C

しかし、次を取得する方法はありますか？

1. A
2. B
1. A
3. C

すなわち。テキストの先頭に同じ番号を付けて、ページ上のすべてのリンクを一意に識別します。

注: 特定の URL をハードコーディングすることはできません。何百ものリンクを処理する可能性があり、事前に URL がわかりません。

これはJavaScriptで簡単/可能であることを認識しています.CSSベースのソリューションまたはCSSでこれが不可能な理由の説明にのみ興味があります.

4

5 に答える 5

2

純粋な CSS でこの動作を実現できるとは思わず、Javascript が必要です。そして、次のようなケースが常にあります。

http://google.com/
http://google.com
google.com
google.com/
www.google.com

あなたは要点を理解します。

jQuery では、これは非常に簡単なので、それを使用することをお勧めします。

于 2012-07-17T08:40:46.510 に答える
2

わかりました、あなたの質問の意味はわかりました。プレーンな CSS だけでは不可能です (少なくともクロスプラットフォームでは不可能です..)

JavaScript を使用できる場合、いくつかの可能性があります。

私の好みは、データ属性を使用して値を保持することです。この例では、data-counter. このようにすると、CSS は簡単になります。

CSS

a:before
{
   content:attr(data-counter)". ";
}​

jQuery がある場合、Javascript は次のようになります。

JS と jQuery

var linkcounter = {};
var counter = 0;
$("a").each(function() {
    if (!linkcounter.hasOwnProperty($(this).attr("href"))) {
        counter++;
        linkcounter[$(this).attr("href")] = counter;
    }
    $(this).attr("data-counter", linkcounter[$(this).attr("href")]);
});

または jQuery なしで次のようにします。

バニラJS

var linkcounter = {};
var counter = 0;
var anchors = document.getElementsByTagName('a');
for(var i = 0; i < anchors.length; i++) {
    if (!linkcounter.hasOwnProperty(anchors[i].getAttribute("href"))) {
        counter++;
        linkcounter[anchors[i].getAttribute("href")] = counter;
    }
    anchors[i].setAttribute("data-counter", linkcounter[anchors[i].getAttribute("href")]);
}

ここで jQuery を使用しないバージョンを表示できます: http://jsfiddle.net/ramsesoriginal/CVW7Y/5

jQuery を使用したバージョン: http://jsfiddle.net/ramsesoriginal/CVW7Y/4

残念ながら、CSS だけでこれを行う方法は (まだ) ありません。これが役立つことを願っています。</p>

于 2012-07-17T09:10:48.097 に答える
0

:contains を使用することもできますが、それがどの程度サポートされているかはわかりませんので、JavaScript を使用したほうがよいかもしれません。

a:contains("A") {
    /* Styles here */
}

a:contains("B") {
    /* Styles here */
}

編集：

どうやら :contains はまったくサポートされていません。他の誰も気にしないように、ここに残しておきます。

ただし、jQuery で :contains を使用して、それに応じてクラスを追加することもできます。

$('a:contains(A)').addClass('CLASS_NAME');
于 2012-07-17T08:44:21.177 に答える
0

jQuery を使用しても問題ない場合は、:before疑似要素のコンテンツを操作することでこれを行うことができます。

デモ: http://jsfiddle.net/rwMWx/2/

JS

var labels = [
    "1",
    "2",
    "1",
    "3"
    // and so on...    
];

// OR maybe put in some algo for this sequence

$('a').each(function(i) {
    $(this).attr('data-label', labels[i] + '. ');
});

CSS

a:before {
    content: attr(data-label);
    color: red;
    text-align: left;
    padding-right: 10px;
    font-size: 11px;
    display: inline;
}
于 2012-07-17T08:59:24.217 に答える
-1

このコードを試してください:

var counter = 0, cache = {};
$('a').each(function (i, a) {
    a = $(a);
    var href = a.attr('href');
    var c = cache[href];
    if (!c) {
        counter++;
        c = counter;
        cache[href] = c;
    }
    a.text(c + '. ' + a.text());
});
​

私はjQueryを使用していますが、それがどのように機能するかです: http://jsfiddle.net/pDLbQ/

于 2012-07-17T08:57:43.157 に答える