如何使用jQuery在页面上显示特定的div ID？

Question

I want to show a particular div with particular id on the page. I am able to show the div with class information but when I try to access it by giving div id then it is not working, this is how am trying to access it from javascript.

if((document.getElementById("apMain.stageId").value) == "11"){
            doShow();
    }else{
      alert('else');
    }
    function doShow(){
            $(".bill_info").show();
      }

I want to access div with id= stg_Pdel , I have tried using

function doShow(){
        $('#stg_Pdel').show();
  }

but am not able to get the div open on the page, what should be the right approach of doing it ?

My div is:

<div class="bill_info">
<h3>Additional required fields</h3>
    <div id="stg_install">
        <div class="row">
            <span class="label">
                <form:label path="billingInfo.otc" cssClass="normalText" cssErrorClass="normalTextRed" >OTC:</form:label>
            </span>
            <span class="formw">
                <form:input path="billingInfo.otc" cssClass="normalField" cssErrorClass="validationError" size="25" disabled='true'/>
            </span>
            <span class="error">Values for all charge fields must be numeric.</span>
        </div>
    </div>

    <div id="stg_Pdel">
        <div class="row">
            <span class="label">
            <form:label path="billingInfo.priceId" cssClass="normalText" cssErrorClass="normalTextRed" >Price Type:</form:label>
            </span>
            <span class="formw">
                <form:select path="billingInfo.priceId" cssErrorClass="validationError" disabled='true'>
                    <form:options items="${priceTypes}" itemValue="key" itemLabel="value" />
                </form:select>
            </span>
        </div>
    </div>

    <div id='stg_closed'>
        <div class="row">
            <span class="label">
                <form:label path="billingInfo.billingClassId" cssClass="normalText" cssErrorClass="normalTextRed" >Billing:</form:label>
            </span>
            <span class="formw">
                <form:select path="billingInfo.billingClassId" cssErrorClass="validationError" disabled='true'>
                    <form:option value="" label="--Select--" />
                    <form:options items="${billingTypes}" itemValue="key" itemLabel="value" />
                </form:select>
            </span>
        </div>
    </div>

    <div style="clear:both"></div><br/>
</div>

Answer 1

You're missing a closing </div> tag right before that one, so it's inside the previous one ("stg_install"). An outer "display: none" will override (sort-of) the "display: block" (or whatever) on the inner <div> .

If it's not the <div> nesting issue that was present in the initial post of the question, then perhaps there's a hint of the problem where you mention showing the <div> with class "bill_info". If that whole thing is currently not showing, then calling .show() on another <div> (the "stg_Pdel" <div> ) will have no effect. Again, the outer block will hide it no matter what it's "display" style is set to.

If the ".bill_info" <div> is hidden, you need to do something like this:

function doShow(stage) {
  $('.bill_info').show()
    .children('div').hide().end()
    .find('#' + stage).show();
}

You'd pass "doShow" either "stg_Pdel", "stg_install", or "stg_closed", and it would make sure one of those inner <div> elements is showing. edit for more detail — The idea is to do the following things:

1. Make sure that the over all "bill_info" block is visible;
2. Find the immediate child <div> elements and hide them all;
3. Find the target "stg" <div> and make it visible

Note that using .find() is not really necessary because you're searching by "id" value, but it should work.

If you need the function to work on more than one stage, you could do it like this:

function doShow() {
  $('.bill_info').show()
    .children('div').hide();

  for (var ac = 0; ac < arguments.length; ++ac) {
    var stg = arguments[ac];
    $('#' + stg).show();
  }
}