在web開(kāi)發(fā)中,我們常常需要將一些列表按照一定的方式進(jìn)行排版,比如居中對(duì)齊。而在使用jQuery進(jìn)行web開(kāi)發(fā)時(shí),可以通過(guò)簡(jiǎn)單的代碼實(shí)現(xiàn)這一功能。
// 獲取ul標(biāo)簽中的所有l(wèi)i標(biāo)簽 var $lis = $('ul li'); // 遍歷所有的li標(biāo)簽,設(shè)置居中對(duì)齊 $lis.each(function() { // 獲取當(dāng)前l(fā)i標(biāo)簽的寬度 var width = $(this).width(); // 計(jì)算居中需要向左移動(dòng)的距離 var left = ($(this).parent().width() - width) / 2; // 設(shè)置li標(biāo)簽的居中對(duì)齊樣式 $(this).css({ 'position': 'relative', 'left': left + 'px' }); });
以上的代碼中,首先通過(guò)選擇器獲取到ul標(biāo)簽中的所有l(wèi)i標(biāo)簽,并使用.each方法遍歷每個(gè)li標(biāo)簽。然后,獲取當(dāng)前l(fā)i標(biāo)簽的寬度,并計(jì)算出居中需要向左移動(dòng)的距離。最后,通過(guò)設(shè)置li標(biāo)簽的相對(duì)定位和left屬性,使它們居中對(duì)齊。值得注意的是,此代碼中假設(shè)了li標(biāo)簽的寬度是固定值,如果寬度不確定,需要在計(jì)算左邊距時(shí)加以考慮。