CODEWITHSUNDEEP
javascriptjqueryhtml
Himanshu Yadav
Himanshu Yadav

Reputation: 13583

Selecting Child fields of a div

I have multiple div with child fields. These child fields share similar names. I am trying to show child fields of a particular. But I am only getting child fields of first div.
Does it have anything to do it with child Field's name
HTML

 <div class="row childFields" id="parent-question1">
        <p class="subtitle">Give full details here: </p>
        <div class="col-md-6 colChildFields" style="display:none" name="condition">
            <label class="pocLabel">Nature of Condition</label>
            <input type="text" name="condition" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="datesAndDuration">
            <label class="pocLabel">Dates and Duration</label>
            <input type="text" name="datesAndDuration" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="doctorName">
            <label class="pocLabel">Name Of Doctor</label>
            <input type="text" name="doctorName" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="hospitalName">
            <label class="pocLabel">Name of Hospital</label>
            <input type="text" name="hospitalName" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="hospitalAddress">
            <label class="pocLabel">Address of Hospital</label>
            <input type="text" name="hospitalAddress" class="form-control">
        </div>
    </div>
    <div class="row childFields" id="parent-question2">
        <p class="subtitle">Give full details here: </p>
        <div class="col-md-6 colChildFields" style="display:none" name="condition">
            <label class="pocLabel">Nature of Condition</label>
            <input type="text" name="condition" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="datesAndDuration">
            <label class="pocLabel">Dates and Duration</label>
            <input type="text" name="datesAndDuration" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="doctorName">
            <label class="pocLabel">Name Of Doctor</label>
            <input type="text" name="doctorName" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="hospitalName">
            <label class="pocLabel">Name of Hospital</label>
            <input type="text" name="hospitalName" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="hospitalAddress">
            <label class="pocLabel">Address of Hospital</label>
            <input type="text" name="hospitalAddress" class="form-control">
        </div>
    </div>
    <div class="row childFields" id="parent-question3">
        <p class="subtitle">Give full details here: </p>
        <div class="col-md-6 colChildFields" style="display:none" name="condition">
            <label class="pocLabel">Nature of Condition</label>
            <input type="text" name="condition" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="datesAndDuration">
            <label class="pocLabel">Dates and Duration</label>
            <input type="text" name="datesAndDuration" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="doctorName">
            <label class="pocLabel">Name Of Doctor</label>
            <input type="text" name="doctorName" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="hospitalName">
            <label class="pocLabel">Name of Hospital</label>
            <input type="text" name="hospitalName" class="form-control">
        </div>
        <div class="col-md-6 colChildFields" style="display:none" name="hospitalAddress">
            <label class="pocLabel">Address of Hospital</label>
            <input type="text" name="hospitalAddress" class="form-control">
        </div>
    </div>

jQuery

var childFieldDivId = '#parent-'+fieldName;
$(childFieldDivId).find('div').each(function(i, childField){
  $(childField).show();
});

Upvotes: 1

Views: 112

Answers (4)

Sergio
Sergio

Reputation: 28845

Try this:

var childFieldDivId = '#parent-'+fieldName;
$('.subtitle').on('click', function(){ // not sure you need onclick handler
    $(this).siblings().show();
});

Demo here

Upvotes: 1

Farhan
Farhan

Reputation: 752

Try this if you want to show all children of that div

var childFieldDivId = '#parent-'+fieldName;
$(childFieldDivId).children('div').show();

Upvotes: 0

Kiran
Kiran

Reputation: 20303

Try this:

var childFieldDivId = '#parent-'+fieldName;
$(childFieldDivId).find('div').each(function(index, value){
  $(this).show();
});

fiddle

Upvotes: 1

lightswitch05
lightswitch05

Reputation: 9428

Instead of looping and calling show(), call show() on the entire selector - DEMO

var childFieldDivId = '#parent-'+fieldName;
$(childFieldDivId).find('div').show();

Upvotes: 0

Related Questions