1

ブレッドクラムの圧縮に問題があります。ブレッドクラムが多くの要素に到達し、複数の行にまたがる場合は、開始要素の一部を圧縮する必要があります（ "..."）。

例1

var height = $('#breadcrumbsContainer > span').height();
var length = $('#breadcrumbsContainer > span span').length;

while (height > 17) {

 for (var j = 1; j < length; j++) {
    if ($('#breadcrumbsContainer > span').get(j).find('a').text() != "...") {
        if ($('#breadcrumbsContainer > span').get(j).find('a').text("..."));
    }
    j++;
 }
};

例2

var height = $('#breadcrumbsContainer > span').height();
var length = $('#breadcrumbsContainer > span span').length;

while (height > 17) {

for (var j = 1; j < length; j++) {
    if ($('#breadcrumbsContainer > span:eq(j) a').text() != "...") {
        if ($('#breadcrumbsContainer > span:eq(j) a').text("..."));
    }
    j++;
}

};

forループ内で「.get（j）」または：eq（j）を使用しなくても、すべてがうまく機能します。コードを実行するたびに、（j = 1）の2番目の要素ではなく、最初の要素を受け取るように見えます。（ルートノードを圧縮したくない）

jsFiddleの例：http ：//jsfiddle.net/TPqfK/3/

4

1 に答える 1

1

別の解決策：私の元の答えはまだ下にありますが、これを別の方法で行う方法を考えていたので、次のコードのデモBREADCRUMBS_MAX_WIDTHを作成しました。値を大きくしたり小さくしたりすると、省略記号のサイズ変更と変更が可能になります。.last()より.first()高いレベルのブレッドクラムを最初に省略記号化するようにします:-)

JavaScript（jQueryが必要）

var BREADCRUMBS_MAX_WIDTH = 700;

function crumbsWidth() {
  var width = 0;
  $('#breadcrumbs li').each(function() {
    width += $(this).outerWidth();
  });
  return width;
}

while (crumbsWidth() >= BREADCRUMBS_MAX_WIDTH && $('#breadcrumbs li').length - 2 !== $('#breadcrumbs li.ellipsis').length) {
  $('#breadcrumbs li:not(:first-child):not(:last-child):not(.ellipsis)').last().addClass('ellipsis');
}

CSS

#breadcrumbs {
  margin:0;
  padding:0;
  list-style-type:none;
  font-size:0;
}
#breadcrumbs li {
  display:inline-block;
  font-size:16px;
  padding-left:4px;
}
#breadcrumbs li:not(:first-child):before {
  content:'\002192  ';
}
.ellipsis {
  width:60px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

HTML

<ul id="breadcrumbs">
  <li>Lorem ipsum dolor</li>
  <li>sit amet, consectetur</li>
  <li>adipisicing elit, sed</li>
  <li>do eiusmod tempor</li>
  <li>incididunt ut labore</li>
  <li>et dolore magna aliqua</li>
  <li>Ut enim ad minim</li>
</ul>

元の答え：

最初に説明するフィドルが追加される前に、最初はコードの実行に問題がありました。

while (height > 17)制御フローステートメントは無限ループを引き起こす可能性があり、その結果、CPUが100％になり、ブラウザーまたはタブがクラッシュする可能性があります。フィドルで、ループから抜け出す方法を提供していることがわかりますが、質問のコードは実際に問題を完全に説明しているはずです。

すべての子孫ではなく、直接の子のみを返す$('#breadcrumbsContainer > span')CSS子コンビネータを使用しているという点でセレクターの問題があります。>このマークアップをフィドルに使用すると、次のようになります。

  <div id="breadcrumbsContainer">
    <span id="ctl00_breadcrumb">
      <span><a style="text-decoration: none;" href="#">Min startside</a></span>
      <span></span>
      <span><a style="text-decoration: none;" href="#">dfa as dfdsa dsa fdsfas</a></span>
      <span></span>
      <span><a style="text-decoration: none;" href="#">a fdsa fsd adsfdsasad fdsa</a></span>
      <span></span>
      <span><a style="text-decoration: none;" href="#">test aff for log og opr sds</a></span>
      <span></span>
      <span><a style="text-decoration: none;" href="#">TESTs sds</a></span>
      <span></span>
      <span>anders er awesome</span>
    </span>
  </div>​

セレクターは<span id="ctl00_breadcrumb">、ブレッドクラムスパンではなくを検出しています。だからあなたはそれを修正する必要があるかもしれません$('#breadcrumbsContainer span span')

$('#breadcrumbsContainer span span').get(j)を使用すると、jQueryでラップされたオブジェクトではなくDOM要素が返されるためJavaScriptエラーが発生し、.get()呼び出すことができないため、それでも問題は解決しません.find()。

変数が変数値ではなくセレクター文字列の一部であり、jQueryでエラーが発生しないため、 2番目の例の使用:eq()も機能しません。jそれで、

$('#breadcrumbsContainer > span:eq(j) a')

する必要があります

$('#breadcrumbsContainer > span:eq(' + j + ') a')

ただし、これらすべての変更を行っても、動作方法が原因で、結果のセレクターは機能しません:eq()。ドキュメントから

：eqは、先行する式に一致する要素のセットをフィルタリングします

したがって$('#breadcrumbsContainer span span')、すべてのブレッドクラムとスペーサー要素を選択してから、フィルターを適用します。したがって:eq(0)、最初のブレッドクラム:eq(1)になり、最初のスペーサースパンになります。

したがって、これらすべての変更を行うと、次のようになります。

for (var j = 2; j < length; j++) { // <--- starts at 2 (do not change first breadcrumb)
    if ($('#breadcrumbsContainer span span:eq(' + j + ') a').text() != "...") {
       if ($('#breadcrumbsContainer span span:eq(' + j + ') a').text("..."));
    }
    j++;
}

注：この上記のループは機能しますが、次の理由によりあまり効率的ではありません。

  1. ブレッドクラムを埋めるための空<span>の要素を削除して、CSSで各ブレッドクラムの間隔を空けることができます
  2. たとえば、よりセマンティックなマークアップを使用してデータを記述し<ul><li></li></ul>ます
  3. セレクターはjQuery拡張機能であり、CSS仕様の一部ではありません。:eq()：eq（）を使用したクエリでは、ネイティブDOM querySelectorAll（）メソッドによって提供されるパフォーマンスの向上を利用できません[ドキュメント]
  4. テキストを変更するよりも、広くサポートされているCSSプロパティを使用して、各ブレッドクラムの幅text-overflow:ellipsisを変更する方が簡単な場合があります。<a>
于 2012-11-05T12:30:04.573 に答える