I am breaking my head on how to get a specific childs div id which style is block; I have been googling and stackoverflow browsing the hole day.

I am able to get all children by using:

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

But I don't know how to filter for the style. .attr() is not allowed after .get(). So, I only want to know the id as I need to work with it after.

Edit:

Here is the plete function I want to use:

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

Currently when I launch the modal and walk through the steps, but decide to dismiss the modal at step3 and relaunch the modal it will continue on step3. So therefor I thought I would need the current step before dismissal so I can send it to my replace function and set the style of the currentStep to none and the first step to block.

I am breaking my head on how to get a specific childs div id which style is block; I have been googling and stackoverflow browsing the hole day.

I am able to get all children by using:

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

But I don't know how to filter for the style. .attr() is not allowed after .get(). So, I only want to know the id as I need to work with it after.

Edit:

Here is the plete function I want to use:

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

Currently when I launch the modal and walk through the steps, but decide to dismiss the modal at step3 and relaunch the modal it will continue on step3. So therefor I thought I would need the current step before dismissal so I can send it to my replace function and set the style of the currentStep to none and the first step to block.

• javascript
• jquery

• Could you include some html? It's easier to make examples then. I have a feeling that what you might be looking for is api.jquery./find . I would put a class on all the children instead of a specific style. Then use Jquery find to find the children with that class. I know this is different from selecting by style. But I believe this would be a better approach. I haven't posted this as an answer as it's more of an alternative. – Peter Rasmussen Commented Dec 30, 2012 at 14:11
• You will not be able to get a specific childs div id, only all children that have display: block. – crackmigg Commented Dec 30, 2012 at 14:12
• This is just a hunch, but maybe you could use something like this: jsfiddle/sp2nK -- api.jquery./visible-selector - api.jquery./not-selector – Joonas Commented Dec 30, 2012 at 14:18
• @Xeano, I have edit my question with more info. – tvb Commented Dec 30, 2012 at 14:27
• Used the following as an overal solution: stackoverflow./a/14084306/1803216 – tvb Commented Dec 30, 2012 at 22:41

4 Answers 4

Try this to return the block children:

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

This will return only those children that return true in that function.

Update

First, if you're already using jQuery, why bother using the long-hand raw JS selection process? Instead of

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

Change to

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

Also, it looks like there's only ever one step (currentStep) shown at once. Since you're trying to just find the one element that is shown, why not set your css to say:

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

Then you can just remove/add classes to show/hide them. With this method, your replace() function could look like this:

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
}

Strange thing you want... try this

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

Maybe this can help to filter elements: http://api.jquery./filter/

Here's a small demo that takes all block elements, including natively block ones.

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