Discussion :

[Eric5031]

Bonjour,

J'ai du contenu HTML (des spans) caractérisé par une classe done_by. Et j'aimerais tester si ces spans sont vide ou pas.

J'ai donc testé deux différentes façons, une plus old school et une autre avec les sélecteurs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
//Vieille école
$('.done_by').each(function()
{
	var test = $(this).text();		
	if(test.length <= 1){console.log("Empty");}
	else console.log("Filled");
});

Et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//Selectors
$('.done_by').each(function()
    {           
        var emptyTest = $(this).is(':empty');
        console.log(emptyTest);         
    });

Dans le premier cas je n'ai que des empty dans ma console et dans le second j'ai false partout.

Alors que certains spans sont clairement rempli, voici la preuve :



Est-ce que je manque quelque chose ? Suis-je à côté de la plaque ?


PS : J'ai aussi essayé ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('.done_by').has('*').each(function() //or $('.done_by:has(*)').each()
{           
    var emptyTest = $(this).is(':empty');
    console.log(emptyTest);         
});

ça n'a pas été concluant non plus, rien ne s'affiche avec le .has

[SylvainPV]

Ça devrait marcher avec le sélecteur jQuery :empty

Un exemple: http://jsbin.com/fiqetafafi/1/edit?html,js,console

Le script s'exécute bien quand les éléments du DOM sont déjà dans le document ?

[Eric5031]

Si je rajoute des span à la main, ça fonctionne mais tout mes span rempli via AJAX sont considérés comme vide alors qu'ils ne le sont pas. Pourtant j'appelle ma fonction après ma fonction de remplissage AJAX. Une idée de ce qui provoquerait ça ?

[Bovino]

Pourtant j'appelle ma fonction après ma fonction de remplissage AJAX.

Tu pourrais nous montrer ça ?

[Invité]

Bonjour,
Pour prendre en compte le fait qu'il peut y avoir des sauts de lignes et/ou espaces dans les span :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$('.done_by').each(function(){
    var test = $.trim( $(this).html() );
    if( test === '' ){
      console.log("Empty");
    } else {
      console.log("Filled : "+test);
    }
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
  <span class="done_by"></span>
  <span class="done_by">  </span>
  <span class="done_by">
 
  </span>
  <span class="done_by">test 1</span>
  <span class="done_by">test 2
    <b>bla bla</b>
  </span>

donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
    "Empty"
    "Empty"
    "Empty"
    "Filled : test 1"
    "Filled : test 2
        <b>bla bla</b>"