Css ellipsis នៅចុងបញ្ចប់។ ការកាត់អត្ថបទតែមួយ ឬច្រើនបន្ទាត់តាមកម្ពស់ដោយបន្ថែមពងក្រពើ។ ចំណុចបីនៅក្នុង Firefox

I. ការធ្វើម្តងទៀតលើអារេពិតប្រាកដ
សម្រាប់វិធីសាស្រ្តនីមួយៗ និងវិធីសាស្ត្រពាក់ព័ន្ធ
សម្រាប់រង្វិលជុំ
ការប្រើប្រាស់ត្រឹមត្រូវនៃ for...in loop
សម្រាប់ ... នៃរង្វិលជុំ (ការប្រើប្រាស់ implicit of iterator)
ការប្រើប្រាស់ឧបករណ៍បំលែងជាក់លាក់
II. ការធ្វើឡើងវិញលើវត្ថុដូចអារេ
ការប្រើវិធីសាស្រ្តដើម្បីធ្វើឡើងវិញលើអារេពិតប្រាកដ
បម្លែងទៅជាអារេពិតប្រាកដ
កំណត់ចំណាំលើវត្ថុពេលដំណើរការ

I. ការធ្វើម្តងទៀតលើអារេពិតប្រាកដ

នៅពេលនេះ មានវិធីបីយ៉ាងក្នុងការធ្វើឡើងវិញលើធាតុនៃអារេពិតប្រាកដមួយ៖

វិធីសាស្រ្ត Array.prototype.forEach ;

បុរាណសម្រាប់រង្វិលជុំ

"ត្រឹមត្រូវ" ត្រូវបានសាងសង់សម្រាប់ ... នៅក្នុងរង្វិលជុំ។

លើសពីនេះ ក្នុងពេលឆាប់ៗនេះ ជាមួយនឹងការមកដល់នៃស្តង់ដារ ECMAScript 6 (ES 6) ថ្មី វិធីសាស្រ្តពីរទៀតត្រូវបានរំពឹងទុក៖

សម្រាប់ ... នៃរង្វិលជុំ (ការប្រើប្រាស់ implicit of iterator);

ការប្រើប្រាស់ជាក់លាក់នៃ iterator ។

1. The forEach method and related method

ប្រសិនបើគម្រោងរបស់អ្នកត្រូវបានរចនាឡើងដើម្បីគាំទ្រលក្ខណៈនៃស្តង់ដារ ECMAScript 5 (ES5) នោះ អ្នកអាចប្រើការច្នៃប្រឌិតមួយរបស់វា - វិធីសាស្ត្រ forEach ។

ឧទាហរណ៍នៃការប្រើប្រាស់៖

var a = ["a", "b", "c"]; a.forEach(function(entry)( console.log(entry); ));

ជាទូទៅ ការប្រើប្រាស់ forEach តម្រូវឱ្យភ្ជាប់បណ្ណាល័យត្រាប់តាម es5-shim សម្រាប់កម្មវិធីរុករកដែលមិនគាំទ្រវិធីសាស្ត្រនេះពីដើម។ ទាំងនេះរួមមាន IE 8 និងមុននេះ ដែលនៅតែប្រើនៅកន្លែងខ្លះ។

អត្ថប្រយោជន៍របស់ forEach គឺថា មិនចាំបាច់ប្រកាសអថេរមូលដ្ឋានដើម្បីរក្សាទុកសន្ទស្សន៍ និងតម្លៃនៃធាតុអារេបច្ចុប្បន្នទេ ព្រោះពួកវាត្រូវបានបញ្ជូនដោយស្វ័យប្រវត្តិទៅមុខងារហៅត្រឡប់ជាអាគុយម៉ង់។

ប្រសិនបើអ្នកព្រួយបារម្ភអំពីតម្លៃដែលអាចហៅទៅទូរស័ព្ទត្រឡប់មកវិញនៅលើធាតុនីមួយៗ កុំបារម្ភ ហើយអានរឿងនេះ។

forEach ត្រូវបានរចនាឡើងដើម្បីរំលឹកឡើងវិញតាមរយៈធាតុទាំងអស់នៃអារេមួយ ប៉ុន្តែក្រៅពីវា ES5 ផ្តល់នូវវិធីសាស្រ្តមានប្រយោជន៍ជាច្រើនទៀតសម្រាប់ការធ្វើឡើងវិញតាមរយៈធាតុទាំងអស់ ឬមួយចំនួន បូកនឹងការអនុវត្តសកម្មភាពមួយចំនួនលើពួកវា៖

រាល់ - ត្រឡប់ពិត ប្រសិនបើសម្រាប់ធាតុនីមួយៗនៃអារេ ការហៅត្រឡប់ត្រឡប់តម្លៃដែលអាចបំប្លែងទៅជាពិត។
មួយចំនួន - ត្រឡប់ពិត ប្រសិនបើយ៉ាងហោចណាស់ធាតុមួយនៃអារេ ការហៅត្រឡប់ត្រឡប់តម្លៃដែលអាចបំប្លែងទៅជាពិត។
តម្រង - បង្កើតអារេថ្មីមួយដែលរួមបញ្ចូលធាតុទាំងនោះនៃអារេដើមដែលការហៅត្រឡប់មកវិញត្រឡប់ពិត។
map - បង្កើតអារេថ្មីដែលមានតម្លៃត្រឡប់ដោយការហៅត្រឡប់វិញ។
កាត់បន្ថយ - កាត់បន្ថយអារេទៅតម្លៃតែមួយ អនុវត្តការហៅត្រឡប់ទៅធាតុអារេនីមួយៗជាវេន ដោយចាប់ផ្តើមពីដំបូង (អាចមានប្រយោជន៍សម្រាប់ការគណនាផលបូកនៃធាតុអារេ និងមុខងារសង្ខេបផ្សេងទៀត)។
កាត់បន្ថយស្តាំ - ដំណើរការស្រដៀងនឹងការកាត់បន្ថយ ប៉ុន្តែធ្វើម្តងទៀតតាមរយៈធាតុក្នុងលំដាប់បញ្ច្រាស។

2. សម្រាប់រង្វិលជុំ

ល្អសម្រាប់ច្បាប់:

var a = ["a", "b", "c"]; សន្ទស្សន៍ var; សម្រាប់ (សន្ទស្សន៍ = 0; សន្ទស្សន៍< a.length; ++index) { console.log(a); }

ប្រសិនបើប្រវែងនៃអារេគឺថេរពេញមួយរង្វិលជុំ ហើយរង្វិលជុំខ្លួនវាជាកម្មសិទ្ធិរបស់ផ្នែកសំខាន់នៃដំណើរការនៃកូដ (ដែលមិនទំនង) នោះអ្នកអាចប្រើកំណែ "ល្អបំផុត" សម្រាប់ការរក្សាទុកប្រវែងនៃ អារេ៖

var a = ["a", "b", "c"]; var index, len; សម្រាប់ (សន្ទស្សន៍ = 0, len = a.length; លិបិក្រម< len; ++index) { console.log(a); }

តាមទ្រឹស្តី កូដនេះគួរតែដំណើរការលឿនជាងលេខមុនបន្តិច។

ប្រសិនបើលំដាប់នៃធាតុមិនសំខាន់ នោះអ្នកអាចទៅបន្ថែមទៀតនៅក្នុងលក្ខខណ្ឌនៃការបង្កើនប្រសិទ្ធភាព និងកម្ចាត់អថេរសម្រាប់រក្សាទុកប្រវែងនៃអារេ ដោយផ្លាស់ប្តូរលំដាប់នៃការស្វែងរកទៅជាបញ្ច្រាស៖

var a = ["a", "b", "c"]; សន្ទស្សន៍ var; សម្រាប់ (សន្ទស្សន៍ = a.length - 1; index >= 0; --index) ( console.log(a); )

ទោះជាយ៉ាងណាក៏ដោយនៅក្នុងម៉ាស៊ីន JavaScript ទំនើប ហ្គេមបង្កើនប្រសិទ្ធភាពបែបនេះជាធម្មតាគ្មានន័យអ្វីទាំងអស់។

3. ការប្រើប្រាស់ត្រឹមត្រូវនៃ for...in loop

ប្រសិនបើអ្នកត្រូវបានណែនាំឱ្យប្រើ for...in loop សូមចាំថាការធ្វើម្តងទៀតលើអារេ មិនមែនជាអ្វីដែលវាត្រូវបានបម្រុងទុកសម្រាប់នោះទេ។ ផ្ទុយទៅនឹងការយល់ខុសទូទៅមួយ for...in loop មិនធ្វើម្តងទៀតលើ array indices ទេ ប៉ុន្តែជាតាមរយៈ properties ជាច្រើននៃ object មួយ។

ទោះយ៉ាងណាក៏ដោយ ក្នុងករណីខ្លះ ដូចជាការធ្វើម្តងទៀតលើ sparse arrays សម្រាប់...in អាចមានប្រយោជន៍ ដរាបណាអ្នកមានការប្រុងប្រយ័ត្ន ដូចដែលបានបង្ហាញក្នុងឧទាហរណ៍ខាងក្រោម៖

// a - អារេ sparse var a = ; a = "a"; a = "b"; a = "c"; សម្រាប់ (var key in a) (ប្រសិនបើ (a.hasOwnProperty(key) &&/^0$|^d*$/.test(key) && key

HTML
JavaScript

$("ul#myList").children().each(function())( console.log($(this.text()); )); // លទ្ធផល៖ // HTML // CSS // JavaScript

សូមក្រឡេកមើលវិធីដើម្បីកំណត់សន្ទស្សន៍ចុងក្រោយ (ធាតុ) នៅក្នុងវិធីសាស្ត្រនីមួយៗរបស់ jQuery ។

// ជ្រើសរើសធាតុ var myList = $("ul li"); // កំណត់ចំនួនធាតុនៅក្នុងការជ្រើសរើស var total = myList.length; // ធ្វើម្តងទៀតតាមរយៈធាតុដែលបានជ្រើសរើស myList.each(function(index) ( if (index === total - 1) ( // នេះគឺជាធាតុចុងក្រោយក្នុងការជ្រើសរើស) ));

មានអត្ថបទនៃប្រវែងបំពានដែលត្រូវបង្ហាញនៅក្នុងប្លុកនៃកម្ពស់ និងទទឹងថេរ។ ក្នុងករណីនេះ ប្រសិនបើអត្ថបទមិនសមទាំងស្រុងទេ បំណែកនៃអត្ថបទដែលសមទាំងស្រុងទៅក្នុងប្លុកដែលបានផ្តល់ឱ្យគួរតែត្រូវបានបង្ហាញ បន្ទាប់ពីនោះពងក្រពើត្រូវបានកំណត់។

កិច្ចការនេះគឺជារឿងធម្មតា ប៉ុន្តែនៅពេលជាមួយគ្នានេះ វាមិនមែនជារឿងតូចតាចដូចដែលវាហាក់ដូចជានោះទេ។

ជម្រើសសម្រាប់អត្ថបទបន្ទាត់តែមួយនៅក្នុង CSS

ក្នុងករណីនេះ អ្នកអាចប្រើ text-overflow: ellipsis property ។ ក្នុងករណីនេះកុងតឺន័រត្រូវតែមានទ្រព្យសម្បត្តិ ហៀរស្មើ លាក់ឬ ឈុត

ប្លុក (ទទឹង៖ 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis ;)

ជម្រើសសម្រាប់អត្ថបទច្រើនបន្ទាត់ក្នុង CSS

វិធីដំបូងដើម្បីកាត់អត្ថបទពហុជួរដោយប្រើលក្ខណៈសម្បត្តិ CSS គឺត្រូវអនុវត្តធាតុ pseudo : មុននិង : បន្ទាប់ពី. តោះចាប់ផ្តើមជាមួយ HTML markup

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ។ Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat ។ Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptéu ភាពងាយស្រួល។

ហើយឥឡូវនេះទ្រព្យសម្បត្តិខ្លួនឯង

ប្រអប់ (លើស : លាក់ ; កម្ពស់ : 200px ; ទទឹង : 300px ; កម្ពស់បន្ទាត់ : 25ភីច ; ) .ប្រអប់ : មុន ( មាតិកា : "" ; អណ្តែត : ឆ្វេង ; ទទឹង : ៥ភីច ; កម្ពស់ : ២០០ភីច ; ) .ប្រអប់ > * : ដំបូង -child ( float : right ; width : 100% ; margin-left : -5px ; ) .box :after ( content : "\02026" ; box-sizing : content-box ; float : right ; position : relative ; top : -25px ; ទទឹង៖ 3em ;

វិធីមួយទៀតគឺប្រើលក្ខណសម្បត្តិទទឹងជួរឈរ ដោយយើងកំណត់ទទឹងជួរឈរសម្រាប់អត្ថបទពហុជួរ។ ទោះជាយ៉ាងណាក៏ដោយ នៅពេលប្រើវិធីនេះ វានឹងមិនអាចកំណត់ពងក្រពើនៅចុងបញ្ចប់បានទេ។ HTML៖

ប្លុក ( overflow : លាក់ ; កម្ពស់ : 200px ; ទទឹង : 300px ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; column-width : 150px ; 0% ;

វិធីទីបីដើម្បីដោះស្រាយអត្ថបទច្រើនបន្ទាត់ដោយប្រើ CSS គឺសម្រាប់កម្មវិធីរុករកតាមអ៊ីនធឺណិត។ នៅក្នុងវាយើងនឹងត្រូវប្រើលក្ខណៈសម្បត្តិជាក់លាក់មួយចំនួនជាមួយបុព្វបទ - កញ្ចប់គេហទំព័រ. ចំនុចសំខាន់គឺ -webkit-line-clamp ដែលអនុញ្ញាតឱ្យអ្នកបញ្ជាក់ចំនួនបន្ទាត់ដែលត្រូវបញ្ចេញក្នុងប្លុក។ ដំណោះស្រាយគឺស្រស់ស្អាត ប៉ុន្តែមានកម្រិតដោយសារតែការងាររបស់វានៅក្នុងក្រុមកម្មវិធីរុករកដែលមានកំណត់

ប្លុក (លើសចំណុះ : លាក់ ; អត្ថបទលើស : ពងក្រពើ ; បង្ហាញ : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ;)

ជម្រើសសម្រាប់អត្ថបទច្រើនបន្ទាត់ក្នុង JavaScript

នៅទីនេះ ប្លុកដែលមើលមិនឃើញបន្ថែមត្រូវបានប្រើ ដែលអត្ថបទរបស់យើងត្រូវបានដាក់ដំបូង បន្ទាប់មកវាត្រូវបានដកចេញមួយតួអក្សរក្នុងពេលតែមួយ រហូតដល់កម្ពស់នៃប្លុកនេះតិចជាង ឬស្មើនឹងកម្ពស់នៃប្លុកដែលចង់បាន។ ហើយនៅចុងបញ្ចប់អត្ថបទត្រូវបានផ្លាស់ទីទៅប្លុកដើម។

var block = ឯកសារ។ querySelector(.block"), អត្ថបទ = ប្លុក។ innerHTML, ក្លូន = ឯកសារ។ createElement("div");

ក្លូន រចនាប័ទ្ម។ ទីតាំង = "ដាច់ខាត";

(function ($) ( var truncate = function (el ) ( var text = el . text ( ), height = el . height ( ), clone = el . clone ( ); clone . css (( position : "absolute" , ភាពមើលឃើញ : "លាក់", កម្ពស់ : "ស្វ័យប្រវត្តិ" )); ( ក្លូន . អត្ថបទ ( អត្ថបទ . ខ្សែអក្សររង ( 0 , លីត្រ ) + " ... " ); នីមួយៗ (មុខងារ () ( កាត់ចេញ ( $ ( នេះ )); )); ) ( jQuery ));