0

リストに含まれるタグの数に基づいて、子 A タグに均等な幅を動的に与えようとしています。(たとえば、4 つの A の場合はすべて 25% の幅になり、3 つのタグの場合は 33% になります)。

div 内の子の数を数え、100 を var 数で割ってみましたが、成功しませんでした

jQuery

 var numChildren = $("div a").size()
    $('a').css({ width : 100/numChildren });

CSS

a { width: /*DYNAMIC*/ (all even) }

div {width: 100%; }

HTML

<div>
 <a></a>
 <a></a>
 <a></a>
 <a></a>
</div>
4

7 に答える 7

0

IE7以下をサポートする必要がない場合、Oriolの答えは正しいものです。

これらのブラウザーのサポートが必要な場合は、他の人が既に説明したように相対的な幅を計算できます。

しかし、 n 個以上の子を持つことはないとわかっている場合は、次のようにすることもできます。

// assuming that will never have more than 4 children
$('div:has(a)').addClass('one');
$('div:has(a+a)').addClass('two');
$('div:has(a+a+a)').addClass('three');
$('div:has(a+a+a+a)').addClass('four');

そしてCSS

div a       { width: 100%; }
div.two a   { width: 50%; }
div.three a { width: 33.3%; }
div.four a  { width: 25%; }

デモ

于 2013-10-17T20:46:06.210 に答える
0

現在のコードでは、4 つの要素がある場合、次のように設定しています。

width: 25;

私はあなたがこれを望んでいると思います：

$('a').css({ width : 100/numChildren + '%' });
于 2013-10-17T18:55:13.173 に答える
0

widthパーセンテージで設定する必要はないと思います。最終的にはjavascriptを使用して均等に配布する予定ですwidth

HTML:

<div>
 <a>One</a>
 <a>Two</a>
 <a>Three</a>
 <a>Four</a>
</div>

Javascript:

var parent =  $("div");
var anchors = parent.find('a');
anchors.css({ width : parent.width() / anchors.length });

CSS:

div > a {
    background: red;
    display: inline-block;
}

デモ

于 2013-10-17T19:00:25.170 に答える
0

このコードを使用できます：

jsFiddle here

HTML

<div id="content">
 <a></a>
 <a></a>
 <a></a>
 <a></a>
</div>

CSS

#content{
    width:100px;
    height:20px;
    background:#888;
}

a{
    height:20px;
    background:red;
    display:block;
    float:left;
}

jQuery

$(document).ready(function(){
    var numberChild = $("#content a").length;
    $("#content a").css("width",(100/numberChild)+"%");
});
于 2013-10-17T18:57:00.903 に答える
0

jquery を次のように変更してみてください。

 var numChildren = $("div a").length;
    $('a').css({ 'width', 100/numChildren + '%' });
于 2013-10-17T18:57:27.257 に答える
0

HTML

<div>
 <a>Test Me</a>
 <a>Test Me</a>
 <a>Test Me</a>
 <a>Test Me</a>
</div>

ジャバスクリプト

var numChildren = $("div a").length;
$('a').css({ width : 100/numChildren+'%' });
alert(100/numChildren);

CSS

div
{
    width:300px;
}
a
{
    position:relative;
    float:left;
    background-color:#EEE;
}

JSFIDDLE リンク

于 2013-10-17T18:57:39.720 に答える