Obtenir le div id d'un style = block

Question

Je suis en train de me casser la tête pour savoir comment obtenir l'identifiant d'une div enfant spécifique dont le style est block ; J'ai cherché sur Google et sur stackoverflow toute la journée.

Je suis capable d'obtenir tous les enfants en utilisant :

var active = $('#myDiv').children().get();

Mais je ne sais pas comment filtrer pour le style. .attr() n'est pas autorisé après .get(). Donc, je veux seulement connaître l'id car je dois travailler avec lui ensuite.

Edit :

Voici la fonction complète que je veux utiliser :

  // ON MODAL DISMISS, RESET STEPS
  $('#myDiv').on('hidden', function() {

    var currentStep = $('#myDiv').children().filter(function(){
        return $(this).css('display') === 'block'; 
    });

    //console.log(currentStep);
        replace(currentStep, step1);
  });

function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}

HTML :

<div id="myDiv">
 <div id="step1">
  ...
 </div>
 <div id="step2">
  ...
 </div>
 <div id="step3">
  ...
 </div>
</div>

Actuellement, lorsque je lance la modale et que je parcours les étapes, mais que je décide d'ignorer la modale à l'étape 3 et que je relance la modale, celle-ci continue à l'étape 3. J'ai donc pensé que j'aurais besoin de l'étape actuelle avant le renvoi pour pouvoir l'envoyer à ma fonction replace et définir le style de l'étape actuelle sur none et la première étape sur block.

Answer 1

Essayez ceci pour renvoyer les enfants du bloc :

$('#mydiv').children().filter(function () {
  return $(this).css('display') === 'block';
});

Cela ne retournera que les enfants qui retournent true dans cette fonction.

Mise à jour

Tout d'abord, si vous utilisez déjà jQuery, pourquoi s'embêter à utiliser le processus de sélection de JS brut à la main ? Au lieu de

function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}

Changer pour

function replace(hide, show) {
  $('#' + hide).hide();
  $('#' + show).show();
}

De plus, il semble qu'il n'y ait jamais qu'une seule étape ( currentStep ) montrés en même temps. Puisque vous essayez de trouver le seul élément qui est affiché, pourquoi ne pas définir votre css pour dire :

#mydiv div {
  display: none;
}
#mydiv div.show {
  display: block;
}

Il vous suffit ensuite de supprimer ou d'ajouter des classes pour les afficher ou les masquer. Avec cette méthode, votre replace() pourrait ressembler à ceci :

function replace(show) {
  $('#mydiv div.show').removeClass('show'); // reset all shown children to be hidden
  $('#mydiv ' + show).addClass('show'); // same way you determine which div should show
}

Answer 2

Une chose étrange que vous voulez... essayez ceci

var active = $( '#myDiv' ).children().filter( function() {
    return 'block' == $(this).css( 'display' );
} );

Answer 3

Peut-être que cela peut aider à filtrer les éléments : http://api.jquery.com/filter/

Answer 4

Voici une petite démo qui prend tous les éléments en bloc, y compris les éléments en bloc natifs.

$(selectedElements).filter(function(){
    return $(this).css('display') === 'block';
});