Javascript Beyin Fırtınası
merhaba,
ortada bir sorun yok, bu soru tamamen mantıksal yaklaşım üzerine fikir yürütmek ile alakalı.
basit bir ul li listelemesi yaptım. burada amacım belirtilen dizin adresi dışında kalan adresileri toggle ile gizlemek. çok sayıda farklı yaklaşım uygulanabilecek senaryolar mevcut. neyse konuyu dağıtmayım. konsolda yazdığım kodlar gözükmekte, döngü içerisinde hızlı bir şekilde listelemede eşleşen kısımları alıyorum. döngü tamamlanmadan şunu eklersem eğer,
$(this).toggle(cAttr);
şimdi nolmuş oldu, döngü içerisinde false olan değerler gizlenmiş oldu. ama gözüken kısım ilk resimde verdiğim gibi ortalarda kaldığı için display:none'un içerisinde bulunmakta. hadi bu sorunu çözmek için, gelen değeri parçaladım diyelim;
let searchText = this.value.split('/'), x = [];
for (let y = 0; y < searchText.length; ) {
x[y] = y == 0 ? searchText[0] : x[y-1]+'/'+searchText[y];
y++;
}
/*
sonucu:
0: "bin"
1: "bin/klasor-1"
2: "bin/klasor-1/bir-dizin"
3: "bin/klasor-1/bir-dizin/baska-bir-dizin"
4: "bin/klasor-1/bir-dizin/baska-bir-dizin/resim"
*/
böylece gelen değerin tüm derinliklerini tek tek kontrol edebilecek bir diziye sahip olmuş oldum. ama bu diziyi kontrol ettirebilmem için, indexOf için döngü içerisinde döngü kullanmam gerekiyor. bu da şaşırtıcı derecede yanıt süresini uzatıyor. zaten bu kullanıma sıcak bakmadım, döngü içerisinde koşul yazıp bir daha döngüye aldığımda çok fazla koşul hesaplaması gerçekleşmiş oluyor
cAttr = sAttr.indexOf('bin/klasor-1/bir-dizin/baska-bir-dizin/resim') !== -1 || koşul || koşull ... şeklinde derinlikler boyunca döngü içerisinde dönüp duruyor
alternatif olarak attr yerine text kullanıp, klasör adına dayalı arama yapabilirim diye düşündüm. istediğim sonucu gayet net bir şekilde verebilir bu sayede. ama bu seferde farklı bir derinlikte bulunan benzer bir ad yüzünden tam yol yazılmasına rağmen birden fazla yol gösterebilmesi çok çok düşük bir ihtimal. döngü içerisinde gerçekleştiği için de işlem, ilk sonucu aldıktan sonra durmasını da söyleyemiyorum. bir alternatif ise, komple listeyi gizlemek ve true olan sonuçlar için kısa süreliğine aynı konumda yeni bir liste oluşturabilirim, bu seferde dom şişmiş olacak.
olay nasıl yapılır olayı değil, kendi örneklerim ile birden fazla şekilde nasıl yapabileceğimi izah ettim. bu ul li onlarca derinliği olan ve binlerce içerikten oluşan, çok sayıda data değere sahip olduğu için mümkün olan en performanslı şekilde bu iş nasıl yapılmalı olayı. evet, tarayıcıyı yormadan ve tutarsızlık olasılığı bulunmadan bu iş size göre nasıl yapılmalı?
test ederek fikir yürütmek isteyen için html örneği;
<ul style="list-style: none">
<li data-dizin="bin">
bin
<ul style="list-style: none">
<li data-dizin="bin/klasor-1">
klasör 1
<ul style="list-style: none">
<li data-dizin="bin/klasor-1/bir-dizin">
Bir Dizin
<ul style="list-style: none">
<li data-dizin="bin/klasor-1/bir-dizin/baska-bir-dizin">
Başka Bir Dizin
<ul style="list-style: none">
<li data-dizin="bin/klasor-1/bir-dizin/baska-bir-dizin/resim">
resim
<ul style="list-style: none">
<li data-dizin="bin/klasor-1/bir-dizin/baska-bir-dizin/resim/png">
png
<ul style="list-style: none">
<li data-dizin="bin/klasor-1/bir-dizin/baska-bir-dizin/resim/png/jpg">
jpg
<ul style="list-style: none">
<li data-dizin="bin/klasor-1/bir-dizin/baska-bir-dizin/resim/png/jpg/baska-jpg">
baska jpg
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li data-dizin="bin/klasor-1/bir-dizin/baska-bir-dizin/gif">gif
</li>
<li data-dizin="bin/klasor-1/bir-dizin/baska-bir-dizin/tif">tif
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li data-dizin="etc">etc
</li>
<li data-dizin="opp">opp
</li>
</ul>
evet kimse fikir belirtmeyince, geri dönüp düşündükten sonra gerekli düzenlemeyi yaptım. aslında aklıma geldikten sonra gayet basitmiş de... gelmedi : ) tüm yapıyı false edip, parçalara ayırdığım dizin derinliğine göre toggle'ı true yaptım. burda da yaşadığım sorunlardan biri, alt derinliklerin gözükmemesiydi. regex ile başlayan şeklinde bir ifade de bulundum, başlayan olduğu için ve parçalanan değerlerden tek tek derinliğe indiği için bu sefer yan derinlikleri de göstermeye başladı. örneğin bin/klasor şeklinde gitmesi gerekirken, bin/klasor2'i de bin'in aldığında olduğu için. bu sefer başlayan ifadesini çıkartıp sorgu bittikten sonra, son değeri alıp son değerden sonra başlayan diyerek sorunu çözdüm. indexofu kaldırıp koşulları da azaltınca, çok daha verimli oldu.
kullanmak isteyen benzer bir işe uyarlamak isteyen olursa diye kodları da ekliyorum:
$('[name="dizinara2"]').change(function(){
let dirs = this.value.split('/'),
x = [],
dir = $(`[data-dizin="${this.value}"`),
dirLast = this.value,
liToggle = function(bool, mes){
$('[data-dizin]').each(function(){
$(this).toggle(bool);
});
console.log(mes);
};
for (let y = 0; y < dirs.length; ){
x[y] = y == 0 ? dirs[0] : x[y-1]+'/'+dirs[y];
y++;
}
if(dir.html() !== undefined){
liToggle(false, dirLast)
for (let y = 0; y < dirs.length; ){
x[y] = y == 0 ? dirs[0] : x[y-1]+'/'+dirs[y];
$(`[data-dizin="${x[y]}"`).toggle(true);
y++;
}
$(`[data-dizin^="${dirLast}"`).each(function(){
$(this).toggle(true);
});
}else{
dirLast.length > 0 ?
liToggle(false, dirLast+' için sonuç bulunamadı') :
liToggle(true);
}
});