Question

这是我的HTML;

<div class="pagination__page" data-pagination-page="" data-pagination-group="group-0" style="display: block;">
    <div class="question">
        <h2 class="question__title">Country</h2>
        <div class="form-field form-field--dropdown">
            <select required="1" name="country" data-parsley-group="group-0">
                <option selected="selected" value="">Please select...</option>
                <option value="great-britain">Great Britain</option>
                <option value="zimbabwe">Zimbabwe</option>
            </select>
        </div>
    </div>

    <div class="question"> // line 13
        <h2 class="question__title">Postcode</h2>
        <div class="form-field">
            <input data-parsley-postcode="1" name="postcode" type="text" data-parsley-group="group-0">
        </div>
    </div>
</div>

我怎样才能隐藏div＆＃34; 13＆＃34; （见代码中的评论），除非上述国家问题的输入是英国的？

它是动态的，所以我不能直接指定div给它一个名字。我必须继续使用名为input的{{1}}。

如果我可以访问该div，那么我认为它会是这样的;

postcode

Answer 1

JQuery中有一个名为parent()的函数。您可以使用

获取input节点

$("input[name='postcode']")

然后访问其父级的父级以隐藏它：

$("input[name='postcode']").parent().parent().hide();

详细了解parent() here。

编辑（感谢andlrc）：

您也可以使用closest()代替双parent()：

$("input[name='postcode']").closest("div.question").hide();

请参阅here。

Answer 2

parent和next的组合应该可以解决问题：

$(function(){
 $('select[name="country"]').change(function(){
     var country = $(this).val();
   if(country == 'great-britain'){
      $(this).parent().parent().next('.question').show();
   }
   else{
        $(this).parent().parent().next('.question').hide();
   }
 });
});

为了隐藏动态生成的html，您可以执行以下操作：

$('.question').each(function(i,item){
    if((i+1) % 2 ==0){
    $(item).hide();
  }
});

更新了小提琴：https://jsfiddle.net/robertrozas/pen942nf/1/

Answer 3

你必须这样做：

<style>
.hide{display:none;}
</style>

<div class="pagination__page" data-pagination-page="" data-pagination-group="group-0" style="display: block;">
    <div class="question">
        <h2 class="question__title">Country</h2>
        <div class="form-field form-field--dropdown">
            <select required="1" name="country" data-parsley-group="group-0">
                <option selected="selected" value="">Please select...</option>
                <option value="great-britain">Great Britain</option>
                <option value="zimbabwe">Zimbabwe</option>
            </select>
        </div>
    </div>

    <div class="question sh"> // line 13
        <h2 class="question__title">Postcode</h2>
        <div class="form-field">
            <input data-parsley-postcode="1" name="postcode" type="text" data-parsley-group="group-0">
        </div>
    </div>
</div>

<script>

 $("#country").change(function(){
$(this).find("option:selected").each(function(){
  if($(this).attr("value")=="great-britain"){
    $('.sh').show();
  }
  else{
    $('.sh').hide();
});
});
</script>

隐藏父元素

3 个答案:

更新了小提琴：https://jsfiddle.net/robertrozas/pen942nf/1/