jQuery porównanie wartości i zdarzenie

Odpowiedz Nowy wątek
2015-10-14 13:12
shl
0

Witajcie,
mam problem i nie mogę się z nim uporać od kilku dni:

mam kod html:

<ul>
<li>
     <span>A</span><span>A</span><span>A</span><span>C</span><span>D</span>
</li>
<li>
     <span>A</span><span>A</span><span>C</span><span>D</span>
</li>
<li>
    <span>A</span><span>A</span><span>C</span><span>D</span>
</li>
<li>
   <span>A</span><span>A</span><span>C</span><span>D</span>
</li>
</ul>

I teraz chcę zrobić tak, że jeśli w którymś z li występuję span, który ma taką samą zawartość (w przykładzie A) to ten span jest ukrywany.

Czyli zostaje jeden span z wartością A:

<ul>
<li>
     <span>A</span><span>C</span><span>D</span>
</li>
<li>
     <span>A</span><span>C</span><span>D</span>
</li>
<li>
    <span>A</span><span>C</span><span>D</span>
</li>
<li>
   <span>A</span><span>C</span><span>D</span>
</li>
</ul>

Prosiłbym o pomoc jeśli nie jest to zbytnio skomplikowane.

edytowany 2x, ostatnio: dzek69, 2015-10-14 14:38

Pozostało 580 znaków

2015-10-14 14:40
0
var last = null
$('li').each(function(){
  if (last!==null) {
    // if (this.innerHTML !== last.innerHTML) { - błąd
    if (this.innerHTML === last) {
      this.style.display="none";
    }
  }
  last = this.innerHTML;
});

z jQuery zostawiłem tylko each, dla wygody, reszta w czystym js


edytowany 2x, ostatnio: dzek69, 2015-10-14 16:05

Pozostało 580 znaków

2015-10-14 15:52
shl
0

Dziękuję za odpowiedź.
Niestety nie znam się na js :/

Testowałem i efekt nie jest taki .. znikają wszystkie li.

Ten kod przegląda każdy w li i porównuje czy już taka zawartość span występuje / istnieje ?
W tym przykładzie, w rezultacie mamy z każdą inną zawartością.

Pozostało 580 znaków

2015-10-14 16:04
0

sorry, porównanie powinno być ===, a nie !== ;) no i w last mam stringa, a nie obiekt

pisane na szybko, niemniej - gdybyś spróbował przeanalizować to, co zrobiłem to byś to wyłapał od razu


edytowany 1x, ostatnio: dzek69, 2015-10-14 16:05

Pozostało 580 znaków

2015-10-15 09:12
shl
0

Witam ponownie,
niestety nie ma żadnej reakcji jak zrobię tak:

<script type="text/javascript">
    $( document ).ready(function() {
        var last = null;
        $('li').each(function(){
          if (last!==null) {
            // if (this.innerHTML !== last.innerHTML) { - błąd
            if (this.innerHTML === last) {
              this.style.display="none";
            }
          }
          last = this.innerHTML;
        });
    });
</script>
<ul>
<li>
     <span>A</span><span>A</span><span>A</span><span>C</span><span>D</span>
</li>
<li>
     <span>A</span><span>A</span><span>C</span><span>D</span>
</li>
<li>
    <span>A</span><span>A</span><span>C</span><span>D</span>
</li>
<li>
   <span>A</span><span>A</span><span>C</span><span>D</span>
</li>
</ul>

Nie znikają żadne elementy span w li.
Nawet nie jestem w stanie prześledzić tego js .. jego składnia jest tak krótka, że aż wątpię, że taki mały kod robi tyle rzeczy :P

W samym li nie powinna być również pętla zbierająca elementy span ?


A w ten sposób ?

<script type="text/javascript">
    $( document ).ready(function() {
        $('li').hover(function(){
            var last = null;
            $(this).css('background','red');
            $(this).children('span').each(function(){
              if (last!==null) {
                // if (this.innerHTML !== last.innerHTML) { - błąd
                if (this.innerHTML === last) {
                  this.style.display="none";
                }
              }
              last = this.innerHTML;
            });
        });
    });
</script>

Że gdy najadę kursorem myszy na dany li szuka elementów span w danym li i reszta Pana kodu ?
Ale to też niestety nie działa.

Wydaje mi się, że jest już blisko rozwiązania... ale coś nie gra :/

edytowany 9x, ostatnio: dzek69, 2015-10-15 10:29

Pozostało 580 znaków

2015-10-15 09:32
shl

Super .. uzyskaliśmy chyba odpowiedni rezultat, prosiłbym o weryfikację:

<script type="text/javascript">
    $( document ).ready(function() {
        $('li').hover(function(){
            var last = null;
            $(this).css('background','red');
            $('.war',this).each(function(){
              if (last!==null) {
                // if (this.innerHTML !== last.innerHTML) { - błąd
                if (this.innerHTML === last) {
                  this.style.display="none";
                }
              }
              last = this.innerHTML;
            });
        });
    });
</script>

Zmieniłem: $('.war',this)

Serdecznie dziękuję za pomoc, trzeba mieć talent do takich rzeczy aby to wszystko poskładać do kupy :)

edytowany 2x, ostatnio: dzek69, 2015-10-15 10:28
Używaj tagów kolorujących składnię. Co do problemu - nie zaglądam, ale mój przykład jak nie działa to jest jakiś drobny problem, którego nie zauważyłem na sucho ;) - dzek69 2015-10-15 10:30
Nie zmieniaj stylu za pomocą js, zmieniaj same klasy. - Maciej Cąderek 2015-10-15 14:58
no tak, tylko zakładasz, że powtarzające elementy następują po sobie. Więc to ci i tak chyba nie zadziała, jak będzie sekwencja np. A, C, D, B, A, B - LukeJL 2015-10-15 15:21
@LukeJL: On podąża za moim przykładem, a ja tak zrozumiałem jego post - zdaje się błędnie. - dzek69 2015-10-16 10:53

Pozostało 580 znaków

2015-10-15 15:27
0

można to też tak rozwiązać:
http://jsfiddle.net/sjsf258q/2/

$(function () {
    $(".list li").each(function () {
        var texts = [];
        $(this).children().each(function () {
            var txt = this.innerHTML;
            if (texts.indexOf(txt) != -1) 
                this.style.display = 'none';
            texts.push(txt);
        });
    });
});

((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);
edytowany 1x, ostatnio: LukeJL, 2015-10-15 15:30

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0