Jquery’de Contains
Selamlar;
Bugün jquery’de contains function’ının bize getirdiği büyük kolaylıktan bahsedeceğiz.
Örneğin bir çok div’imiz olsun. Ve Mvc sayfamızdaki bu divlerin içinde yazılarımız olsun. Şimdi bir arama yapıp ilgili kelimenin geçtiği divlerin arka rengini değiştirelim. İlgili kod aşağıda görüldüğü gibidir. “contains” function’ı ile aranan text’in geçtiği divlerin arka rengi css yardımı ile kırmızı renge bürünmüştür.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
@{ ViewBag.Title = "Index"; } <h2>Jquert Contains</h2> <title>Contains in jQuery</title> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script> function SearchKey(key) { $("div").css("background-color", "white"); $("div:contains('" + key + "')").css("background-color", "red"); } </script> <body> <form> Arama:<input type="text" id="srcText" /><input type="button" value="ARA" onclick="SearchKey(this.form.srcText.value)" /><br /><hr /> <div>Magic The Gathering - XBOXONE</div> <div>Street Figter - PS4</div> <div>Gears Of War - XBOX360</div> <div>Uncharted- PS3</div> <div>Zelda - NINTENDO</div> <div>Last Of Us - PS3</div> <div>Halo - XBOX360</div> <div>Tomb Raider - XBOXONE</div> <div>Heavy Rain - PS3</div> <div>God Of War3 - PS3</div> <div>Quantic Dream - XBOXONE</div> <div>Beyond Two Souls - PS3</div> <div>SunSet Overdrive - XBOXONE</div> </form> </body> |
İlgili Ekran Çıktısı:
Bir de koşula göre “contains” nasıl kullanılır onu inceleyelim: Aşağıdaki örnekde “counter” adında bir değişken oluşturulmuş ve her kayıt için “1” arttırılmıştır. Aranan kelimenin ait olduğu div’in arka rengi counter çift sayı olduğu durumda kırmızı tek sayı olduğu durumda mavi atanmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
@{ ViewBag.Title = "Index"; } <h2>Jquert Contains</h2> <title>Contains in jQuery</title> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script> function SearchKey(key) { $("div").css("background-color", "white"); var counter = 1; $("div:contains('" + key + "')").each(function () { if (counter % 2 == 0) { $(this).css("background-color", "red"); } else { $(this).css("background-color", "skyblue"); } counter++; }) } </script> <body> <form> Arama:<input type="text" id="srcText" /><input type="button" value="ARA" onclick="SearchKey(this.form.srcText.value)" /><br /><hr /> <div>Magic The Gathering - XBOXONE</div> <div>Street Figter - PS4</div> <div>Gears Of War - XBOX360</div> <div>Uncharted- PS3</div> <div>Zelda - NINTENDO</div> <div>Last Of Us - PS3</div> <div>Halo - XBOX360</div> <div>Tomb Raider - XBOXONE</div> <div>Heavy Rain - PS3</div> <div>God Of War3 - PS3</div> <div>Quantic Dream - XBOXONE</div> <div>Beyond Two Souls - PS3</div> <div>SunSet Overdrive - XBOXONE</div> </form> </body> |
Şimdi sıra geldi Case Insensitive yani büyük küçük harf duyarlılığını bırakmaya.
Bunu için ya var olan contains aşağıdaki gibi ezilir.
|
1 2 3 4 5 |
// Eskisinin üzerine ezme jQuery.expr[':'].contains = function (a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; |
Yada aşağıdaki gibi yeni birtane yaratılır. Kullanım şeklide aşağıdaki gibidir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
@{ ViewBag.Title = "Index"; } <h2>Jquert Contains</h2> <title>Contains in jQuery</title> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script> $.extend($.expr[":"], { "containsIN": function (elem, i, match, array) { return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; } }); function SearchKey(key) { $("div").css("background-color", "white"); var counter = 1; $("div:containsIN('" + key + "')").each(function () { if (counter % 2 == 0) { $(this).css("background-color", "red"); } else { $(this).css("background-color", "skyblue"); } counter++; }) } </script> |
Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.
Source:
Son Yorumlar