jQuery porównanie wartości i zdarzenie

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.

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

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ą.

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

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 :/

0

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 :)

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);
        });
    });
});

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