არჩეული / მიღებული / ამოღებული ელემენტების ფილტრაცია – jQuery

ჩავრთოთ ლოკალური ვებ-სერვერი
ჩვენ უკვე წინა გაკვეთილებში განვიხილეთ ელემენტების არჩევა / მიღება / ამოღების 10 სხვადასხვა მეთოდი, რომლებიც გვაძლევს საშუალებას ვებ-გვერდიდან ამოვიღოთ ჩვენთვის სასურველი ელემენტები. მაგრამ jQuery ბიბლიოთეკის შემქმნელები ზემოთხსენებულ ფუნციონალზე არ შეჩერდნენ და დაამატეს კიდევ უფრო საინტერესო და მნიშვნელოვანი ფუნქციონალი, ელემენტების არჩება / მიღება / ამოღებისათვის ვებ-გვერდიდან. რომლის დახმარებითაც ჩვენ შეგვიძლია ვებ-გვერდიდან ელემენტების არჩევა / მიღება / ამოღება მნიშვნელოვანად მარტივი გავხადოთ. გამომდინარე აქედან ჩვენ კიდევ შევისწავლით jQuery -ს დამატებით 8 (რვა) შესაძლებლობას, რომლებიც ძირითადად ეხება ვებ-გვერდიდან არჩეული / მიღებული / ამოღებული ელემენტების ფილტრაციას. რომლებიც მუშაობენ შემდეგნაირად:
განვიხილოთ მონაცემების ფილტრაციის პირველი ფუნქცია:
კოდის რედაქტორ პროგრამაში გავხსნათ ჩვენი სატესტო ვებ-გვერდის გამშვები ფაილი index.html:

და მასში ვიპოვოთ შემდეგი ჩანაწერი:

გავხსნათ ჩვენი სატესტო ვებ-გვერდი ვებ-ბრაუზერის დახმარებით, ვიპოვოთ და ვიხილოთ ეს ცხრილი ვიზუალურად:
2015-03-23 00_40_10-ყვავილების მაღაზია_ 1800flowers.com
როგორც ვხედავთ ეს არის ცხრილი და შედგება ორი სვეტისა და სამი ხაზისაგან, ესენია:
პირველი სვეტი:
პირველი სვეტის, პირველი ხაზი: პროდუქტის დასახელება
პირველი სვეტის, მეორე ხაზი: სენპოლია
პირველი სვეტის, მესამე ხაზი: ორქიდეა
მეორე სვეტი:
მეორე სვეტის, პირველი ხაზი: პროდუქტის ფასი
მეორე სვეტის, მეორე ხაზი: 50 ლარი
მეორე სვეტის, მესამე ხაზი: 80 ლარი
წარმოვიდგინოთ რომ, ამოცანა გვეუბნება შემდეგს: ცხრილის სათაურის ველის გარდა კიდევ უნდა დავამატოთ 2 ხაზი(ვარდი – 55 ლარი, ია – 15 ლარი), ანუ საერთო ჯამში გვექნება ორი სვეტი და 5 ხაზი.

შენიშვნა: პირველი ხაზი სათაური (-ები) იქნება, სათაურის ხაზი შექმნილია th ტეგის გამოყენებით, ხოლო პახუხები td ტეგის გამოყენებით:

გამომდინარე აქედან, თუ მხოლოდ პახუხებს დავითვლით გვექნება სულ 4 (ოთხი) ცალი.

ამოცანიდან გამომდინარე, შედეგის მისაღებად უნდა მოვახდინოთ მონაცემების დამატება ჩვენი სატესტო ვებ-გვერდის გამშვებ index.html ფაილში არსებულ სკრიპტში / კოდში:

ვიხილოთ შედეგი, ვებ-ბრაუზერში:

როგორც ხედავთ უკვე სათაურის ხაზის გარდა სულ გვაქვს უკვე, 4 პასუხი / ხაზი:
სენპოლია – 50 ლარი
ორქიდეა – 80 ლარი
ვარდი – 55 ლარი (დამატებული)
ია – 15 ლარი (დამატებული)
წარმოიდგინეთ რომ, არის შემთხვევა როცა ჩვენ გვჭირდება, ავირჩიოთ / მივიღოთ / ამოვიღოთ ამ ცხრილში არსებული პახუხებიდან მხოლოდ ლუწი პასუხები, ანუ მეორე და მეოთხე პასუხი:
სკრიპტის / კოდის რედაქტორი:

ვებ-ბრაუზერი:

იმ მეთოდების გამოყენებით რომლებიც ჩვენ წინა გაკვეთილებში განვიხილეთ, ჩვენ ამის გაკეთებას ვერ შევძლებთ, ჩვენ ვერ შევძლებთ ყველა ლუწი ელემენტების ამოღებას. მაგალითად ჩვენ რომ გვინდოდეს ყველა ლუწი ხაზის უკანა ფონი გაფერადდეს ნაცრის ფერად. იმიტომ რომ, ცხრილის წაკითხვის გამარტივებისათვის ხშირად ასე აკეთებენ. ლუწ ხაზებს აკეთებენ ნაცრის ფერი უკან ფონით, ხოლო კენტ ხაზებს ტოვებენ თეთრი უკანა ფონით. სწორედ ამისათვის გამოიყენება ფილრი.
როგორ მუშაობს ფილრტი?
პირველი ჩვენ უნდა ავირჩიოთ / მივიღოთ / ამოვიღოთ ცხრილი, რომელიც ჩვენ გვაინტერესებს, ჩვენს შემთხვევაში, უნდა ავირჩიოთ / მივიღოთ / ამოვიღოთ შემდეგი ცხრილი:

რომელსაც აქვს / გააჩნია იდენთიფიკატორი:
id=”flower_table”

გავხსნათ კოდის რედაქტორ პროგრამაში, ჩვენი სატესტო ვებ-გვერდის მთავარ დირექტორიაში არსებულ js ფოლდერში:
ამოცანა 2 – დავალება პასუხი – jQuery
არსებული javascript ფაილი, სახელით myjqueryscripts.js :

და მასში დავწეროთ შემდეგი სკრიპტის / კოდის პირველი ხაზი:
$(‘#flower_table ‘);
ანუ ჩვენ გვაინტერესებს, ცხრილი რომლის იდენთიფიკატორი არის flower_table, შემდეგ ვწერთ რომ გვაინტერესებს ამ ცხრილში არსებული tr ტეგები, იმიტომ tr ტეგები რომ, ცხრილის პასუხები / ხაზები რომლებიდანაც ჩვენ გვსურს რომ ავირჩიოთ / მივიღოთ / ამოვიღოთ მხოლოდ ლუწი ტეგები, მოთავსებულის სწორედ tr ტეგებს შორის:

ანუ $(‘#flower_table tr‘);
და იმისათვის რომ ცხრილი გავფილტროთ, ლუწი პასუხების / ხაზების მიხედვით, ამისათვის უნდა დავწეროთ ორწერტილი (:) და შემდეგ სიტყვა even.

შენიშვნა: even ინგლისური სიტყვაა და ქართულად ლუწს ნიშნავს.

ანუ: $(‘#flower_table tr:even‘);

შენიშვნა: როცა ჩვენ ვწერთ even ანუ ლუწი, სკრიპტი / კოდი დააბრუნებს მასივს javascript ენის ფუნქციონალიდან გამომდინარე ანუ ჩვენ javascript კურსის შესწავლის დროს, ვისწავლეთ რომ კომპიუტერი მასივში არსებული ობიექტების დათვლას იწყებს 0 დან და არა 1 დან.
ანუ ჩვენს შემთხვევაში სატესტო ვებ-გვერდის index.html გამშვებ ფაილში, არსებული ცხრილში, რომლის იდენთიფიკატორია flower_table, რომელშიც მოთავსებულია ოთხი პასუხი / ხაზი, კომპიუტერი პასუხად დაგვიბრუნებს მასივს სადაც ობიექტების დათვლა მოხდება შემდეგნაირად:
0 – სენპოლია – 50 ლარი
1 – ორქიდეა – 80 ლარი
2 – ვარდი – 55 ლარი
3 – ია – 15 ლარი
და როცა ჩვენ ვწერთ რომ გვსურს ლუწი ელემენტების არჩევა / მიღება / ამოღება ცხრილიდან, ზემოთ დაწერილი სკრიპტის ($(‘#flower_table tr:even‘);) / კოდის / პირობის გამოყენებთ ჩვენ მივიღებთ / კომპიუტერი დაგვიბრუნებს პასუხს, სადაც ლუწ ელემენტებად ჩათვლის: სენპოლიასა და ვარდს. ანუ:
0 – ლუწი – სენპოლია – 50 ლარი
1 – კენტი – ორქიდეა – 80 ლარი
2 – ლუწი – ვარდი – 55 ლარი
3 – კენტი – ია – 15 ლარი
ხოლო ვიზუალურად რომ შევხედოთ ვებ-ბრაუზერში მსგავსი გადათვლით:

გამომდინარე აქედან, როცა მსგავსი ამოცანის ამოხსნა გიწევთ და საჭიროა ვებ-ბრაუზერის ვიზუალური მხარიდან გამომდინარე, ავირჩიოთ / მივიღოთ / ამოვიღოთ ლუწი ელემენტები, ამ დროს უნდა დავწეროთ რათქმა უნდა პირიქით, ანუ კომპიუტერს უნდა ვუთხრათ რომ მასივიდან გვსურს კენტი ელემენტების არჩევა / მიღება / ამოღება, ვებ-ბრაუზერში კი ესენი იქნება ლუწი ელემენტები.
დავწეროთ ეს პირობა კოდის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში:
$(‘#flower_table tr:odd‘);

შენიშვნა: odd ინგლისური სიტყვაა და ქართულად კენტს ნიშნავს.

რომ შევაჯამოთ პირველი სახის ფილტრი, ამ ფილტრის საშუალებით ჩვენ ავირჩევთ / მივიღებთ / ამოვიღებთ, მხოლოდ ლუწ ან კენტ ელემენტებს.
მეორე ტიპის ფილტრი ეს არის: not

შენიშვნა: not ინგლისური სიტყვაა და ქართულად უარყოფას ნიშნავს.

არსებობს შემთხვევა როცა, ჩვენ გვსურს სასურველი ტიპის ელემენტების არჩევა / მიღება / ამოღება ვებ-გვერდიდან, რომლების ერთი და იგივე ტიპისაა, მაგრამ მათგან არ გვინდა რომელიმე კონკრეტული ელემენტების არჩევა / მიღება / ამოღება. მაგალითად ვებ-გვერდზე გვაქვს უამრავი ბმული, ამავე დროს ეს ბმულები არის ვებ-გვერდის ნავიგაციის ერთ-ერთი ძირითადი შემადგენელი ნაწილი და ამ ყველა ბმულიდან გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ჩვენთვის სასურველი (და არა ყველა) კონკრეტული ბმულები და შევღებოთ ისინი წითლად. მაგრამ ვებ-გვერდის ნავიგაცია უცვლელი დავტოვოთ. გამომდინარე აქედან ჩვენ შეგვიძლია დავწეროთ პირობა, რომ გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ყველა ბმული, მაგრამ გარდა ბმულებისა რომლებიც მოთავსებულია ვებ-გვერდის ნავიგაციის ბლოკში.
ჩვენი სატესტო ვებ-გვერდის მიხედვით, შევასრულოთ not (უარყოფა) ფილტრის მაგალითი:
ჩვენი სატესტო ვებ-გვერდის გამშვები index.html ფაილს თუ დავათვალიერებთ, ვნახავთ რომ მასში გვაქვს ბევრი სურათი, ისინი სულ 6 ცალია:
1: <img src=”images/logo.jpg” width=”900″ height=”108″ alt=”header” title=”ვებ-გვერდის ქუდი” />
2: <img id=”img_1″ src=”images/flower1.jpg” width=”200″ height=”125″ alt=”ყვავილი 1″ />
3: <img id=”img_2″ src=”images/flower2.jpg” width=”200″ height=”125″ alt=”ყვავილი 2″ />
4: <img id=”img_3″ src=”images/flower3.jpg” width=”200″ height=”125″ alt=”ყვავილი 3″ />
5: <img id=”img_4″ src=”images/flower4.jpg” width=”200″ height=”125″ alt=”ყვავილი 4″ />
6: <img src=”images/footer.jpg” width=”900″ height=”67″ alt=”footer” title=”ბრენდები” />

~
წარმოვიდგინოთ რომ, ჩვენ გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ყველა სურათი, გარდა სურათებისა

რომლებიც მოთავსებული ბლოკში – div, რომელსაც გააჩნია იდენთიფიკატორი: div_for_img:

აი ეს ყვავილების (ყვავილი 1, ყვავილი 2, ყვავილი 3, ყვავილი 4) სურათები ჩვენ არ გვჭირდება.
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:

$(‘img:not (#div_for_img img)’);
ანუ:
ჩვენ გვსურს ამოვიღოთ ყველა img სურათი, რომლებიც არსებობს index.html გვერდზე, გარდა :not იმ div -ისა (ბლოკისა) რომლის იდენთიფიკატორიც არის #div_for_img და მასში მოთავსებულია სურათები img.
განვიხილოთ მესამე სახის ფილტრი, ანუ არსებობს შემთხვევა როცა ჩვენ ვებ-გვერდიდან გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ისეთი სახის div ბლოკები, რომლებიც შეიცავენ სურათებს, ან გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ისეთი სახის div ბლოკები რომლებიც შეიცავენ ბმულებს ან რაიმე სხვა სახის ობიექტებს. ანუ არსებობს შემთხვევები როცა გვსურს ავირჩიოთ ობიექტი, რომელით შეიცავს ან მასში მოთავსებულია რაიმე სხვა ტიპის ობიექტი.
განვიხილოთ მაგალითი, წარმოვიდგინოთ რომ ჩვენი სატესტო ვებ-გვერდის სკრიპტში / კოდში არსებული div ბლოკებიდან, რომლების უამრავია, გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ისეთი div – ბლოკები, რომლებიც შეიცავენ fieldset ელემენტებს:

ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘div:has (fieldset)’);

შენიშვნა: has ინგლისური სიტყვაა და ქართულად აქვს / გააჩნია / არსებობს / შეიცავს ნიშნავს.

ანუ: გვსურს ამოვიღოთ ყველა div – ბლოკი, რომლების შეიცავს (რომლებშიც მოთავსებულია) :has, ელემენტებს fieldset.
განვიხილოთ მეოთხე სახის ფილტრი, არსებობს შემთხვევა როცა გვსურს ვებ-გვერდზე არსებული აბზაცებიდან, ავირჩიოთ / მივიღოთ / ამოვიღოთ ისეთი აბზაცი, რომელიც შეიცავს ჩვენთვის სასურველ სიტყვას.
განვიხილოთ ეს შემთხვევა, მაგალითის სახით, წარმოვიდგინოთ რომ ჩვენი სატესტო ვებ-გვერდის გამშვები index.html ფაილიდან, გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ის აბზაცები რომლებიც შეიცავენ სიტყვა – “მშვენიერება” -ს.
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘p:contains (მშვენიერება)’);

შენიშვნა: contains ინგლისური სიტყვაა და ქართულად პირდაპირი მნიშვნელობით შეიცავს ნიშნავს.

ანუ: ჩვენი სატესტო ვებ-გვერდის გამჩვები / მთავარი index.html ფაილში არსებული p – აბზაცებიდან, გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ყველა ის აბზაცი რომლებიც შეიცავენ :contains სიტყვა – “მშვენიერება” -ს.
განვიხილოთ მეხუთე ფილტრი, არსებობს შემთხვევა როცა გვსურს ვებ-გვერდზე არსებული ბლოკიდან (-ებიდან), რომელიც შეიცავს ერთზე მეტ ელემენტს და ამ ელემენტებს არ გააჩნიათ არც რაიმე სახის იდენთიფიკატორი და არც რაიმე სახის კლასი, ავირჩიოთ / მივიღოთ / ამოვიღოთ ჩვენთვის სასურველი მხოლოდ და მხოლოდ პირველი ელემენტი.
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘#div_for_img img:first‘);

შენიშვნა: fisrt ინგლისური სიტყვაა და ქართულად პირდაპირი მნიშვნელობით ნიშნავს პირველს.

ანუ: ჩვენი სატესტო ვებ-გვერდის გამჩვები / მთავარი index.html ფაილში არსებული #div_for_img ბლოკში არსებული სურათებიდან – img, ავირჩიოთ / მივიღოთ / ამოვიღოთ :first – პირველი ელემენტი / ობიექტი.
მეექვსე ფილტრი ეს არის, ბოლო ელემენტის ამოსაღებად განკუთვნილი ფილტრი სახელად last

შენიშვნა: last ინგლისური სიტყვაა და ქართულად პირდაპირი მნიშვნელობით ნიშნავს ბოლო -ს.

არსებობს შემთხვევა როცა გვსურს ვებ-გვერდზე არსებული ბლოკიდან (-ებიდან), რომელიც შეიცავს ერთზე მეტ ელემენტს და ამ ელემენტებს არ გააჩნიათ არც რაიმე სახის იდენთიფიკატორი და არც რაიმე სახის კლასი, ავირჩიოთ / მივიღოთ / ამოვიღოთ ჩვენთვის სასურველი მხოლოდ და მხოლოდ ბოლო ელემენტი.
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘#div_for_img img:last‘);

ანუ: ჩვენი სატესტო ვებ-გვერდის გამჩვები / მთავარი index.html ფაილში არსებული #div_for_img ბლოკში არსებული სურათებიდან – img, ავირჩიოთ / მივიღოთ / ამოვიღოთ :last – ბოლო ელემენტი / ობიექტი.
მეშვიდე სახის / ტიპის ფილტრის დახმარებით / საშუალებით / გამოყენებით ჩვენ შეგვიძლია ვებ-გვერდიდან ავირჩიოთ / მივიღოთ / ამოვიღოთ, დამალული ელემენტები. იმიტომ რომ ხშირად ვებ-გვერდის სკრიპტში / კოდში კონკრეტული ელემენტები / ობიექტები დამალულია მიზანმიმართულად, სწორედ ამისათვის არსებობს ფილტრი დამალული ელემენტების ამოსაღებად.
მაგალითის სახით რომ წარმოვიდგინოთ, როცა ჩვენ გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ვებ-გვერიდან ყველა ის div – ბლოკი, რომლების არის დამალული (display: none;).
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘div:hidden‘);

შენიშვნა: hidden ინგლისური სიტყვაა და ქართულად ნიშნავს უჩინარს / დამალულს / უხილავს.

ანუ: ავირჩიოთ / მივიღოთ / ამოვიღოთ მხოლოდ დამალული :hidden ობიექტები ვებ-გვერდზე არსებული ყველა div – ბლოკიდან.
მერვე სახის / ტიპის ფილტრის დახმარებით / საშუალებით / გამოყენებით ჩვენ შეგვიძლია ვებ-გვერდიდან ავირჩიოთ / მივიღოთ / ამოვიღოთ, არა დამალული, არამედ პირიქით ხილვადი ელემენტები
მაგალითის სახით რომ წარმოვიდგინოთ, როცა ჩვენ გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ვებ-გვერიდან ყველა ის div – ბლოკი, რომლების არის ხილვადი.
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘div:visibility‘);