如何使用Jquery选择具有特定类的父级的子级?

时间:2018-10-14 19:36:48

标签: javascript jquery html

我正在尝试根据班级选择一个孩子,然后用它做事。我不能那样做。我只能用这样的索引来做到这一点:

.children().eq([index])

<div class="container>
    <div class="row">
    <div class="col></div>
    </div>
    </div>

        <script>
    $(document).on('click','.col',(e)=>{
    parent = $(e.target).parent().parent()
    $(parent).children('.row').hide()

    })
    </script>

我无法做到这一点。

3 个答案:

答案 0 :(得分:1)

只需使用find()

$(document).on('click','.col',(e)=>{
  $(e.target)
     .parent()
     .find('>.row')
     .hide()
})

答案 1 :(得分:1)

函数parent仅将上一级的直系父母返回。您需要closest来避免链接parent个呼叫:

$('.container').on('click', '.col', (e) => {
   $(e.target).closest('.container').children('.row').hide()
});

类似地,children仅适用于直系子代,而嵌套元素则需要find

请注意,您的委托元素是搜索的基础元素,因此您可以直接使用它而不用遍历dom:

$(e.delegateTarget).children('.row').hide()

$('.container').on('click', '.col', (e) => {
  $(e.delegateTarget).children('.row').hide()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">This will be hidden</div>
  </div>
  <div>
    <div class="col">This wont be hidden</div>
  </div>
  <div class="row">
    <div class="col">This will be hidden</div>
  </div>
</div>

答案 2 :(得分:0)

看起来您需要的就是

const hbs = require('express-handlebars');

// Handlebars configuration

app.engine('hbs', hbs({
  extname: 'hbs',
  layoutsDir: path.join(__dirname, '/views/layouts/'),
  partialsDir: path.join(__dirname, '/views/partials/'),
  helpers: {
    if_eq: function () {
      if (a == b) {
        return opts.fn(this);
      } else {
        return opts.inverse(this);
      }
    },
    getStringifiedJson: function (value) {
      return JSON.stringify(value);
    }
  }
}));


app.set('view engine', 'hbs');

或者继续使用箭头功能

$(document).on('click','.col',function(){
   $(this).parent().hide();   
});