选择div的子字段

Question

我有多个带有子字段的div。这些子字段共享相似的名称。我试图展示一个特定的儿童领域。但我只是得到了第一个div的子领域。
与儿童Field 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();
});

Answer 1

试试这个：

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

fiddle

Answer 2

试试这个：

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

演示 here

Answer 3

而不是循环并调用show()，而是在整个选择器上调用show() - DEMO

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

Answer 4

如果要显示该div的所有子项

，请尝试此操作

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