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