在jQuery中查找父元素的数量

Question

对于一个小项目，我需要找出所点击按钮的父级的相同div的数量。所以我有一个类似于

的结构

$(document).on("click", '.countthem', function() {
  let n = $(this).parent(".bar").length;
  $(".number").text("There are " + n + " divs.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="number"></span>
<div class="foo">
  <div class="bar"><button class="countthem">should give 3</button></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<div class="foo">
  <div class="bar"><button class="countthem">should give 2</button></div>
  <div class="bar"></div>
</div>

这显然不起作用。我需要实际.bar中.foo的数量，但不知道如何访问它们。

Answer 1

如果我找对你，你想要父母和同班同学一样：）

＆＃13;

＆＃13;

$(document).on("click", '.countthem', function() {
  let selector =  $(this).parent().attr('class').split(" " ).map((e)=>"." + e).join( " " );
  let n = $(this).parent( selector).siblings(selector).length + 1;
  $(".number").text("There are " + n + " divs.");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="number"></span>
<div class="foo">
  <div class="foo bar"><button class="countthem">should give 3</button></div>
  <div class="foo bar"></div>
  <div class="foo bar"></div>
</div>
<div class="foo">
  <div class="bar"><button class="countthem">should give 2</button></div>
  <div class="bar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

演示1 - 按班级

• 注册click活动
的按钮
• 然后从按钮中找到closest() .foo
• 然后从.foo find()全部.bars

演示2 - 按标签

• 在<button>
上注册
• 然后从<button>找到parent()
• 然后找到父母siblings()并计算他们并且不要忘记父母+1

演示3 - 普通JavaScript

详细信息在演示中

<小时/>

演示1 - 按班级

＆＃13;

＆＃13;

// Register the button for click event 
$('.countthem').on("click", function() {

  /* From the button use .closest() to find the
  || closest element with the class .foo
  */
  var foo = $(this).closest('.foo');

  /* Now find() .foo's descendants that have
  || the class .bar and get the quantity with
  || the .length property
  */
  var val = foo.find('.bar').length;

  /* Finally find the .number and display the number
  || of .bars that .foo has
  */
  $('.number').text(val);
});

＆＃13;

output,
button {
  font: inherit
}

.number::before {
  content: 'There are ';
}

.number::after {
  content: ' .bars';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<output class="number"></output>
<div class="foo">
  <div class="bar">
    <button class="countthem">should give 3</button>
  </div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<div class="foo">
  <div class="bar">
    <button class="countthem">should give 2</button>
  </div>
  <div class="bar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

<小时/>

演示2 - 按标签

＆＃13;

＆＃13;

$('button').on('click', function() {

  var qty = $(this).parent().siblings().length + 1;

  $('output').text(qty);
});

＆＃13;

output,
button {
  font: inherit
}

.number::before {
  content: 'There are ';
}

.number::after {
  content: ' .bars';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<output class="number"></output>
<div class="foo">
  <div class="bar">
    <button class="countthem">should give 3</button>
  </div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<div class="foo">
  <div class="bar">
    <button class="countthem">should give 2</button>
  </div>
  <div class="bar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

<小时/>

演示3 - 普通JavaScript

＆＃13;

＆＃13;

// Register the body to the click event
document.body.addEventListener('click', countBars, false);

function countBars(e) {

  /* if the clicked element (e.target) is NOT
  || the element registered to event (body and
  || now referred to as e.currentTarget as well)
  || then...
  */
  if (e.target !== e.currentTarget) {

    // Get the closest() .foo
    var foo = e.target.closest('.foo');

    // Find all .bars under .foo then their quantity
    var qty = foo.querySelectorAll('.bar').length;

    // Set .number value to that number
    document.querySelector('.number').value = qty;
  }

}

＆＃13;

output,
button {
  font: inherit
}

.number::before {
  content: 'There are ';
}

.number::after {
  content: ' .bars';
}

＆＃13;

<output class="number"></output>
<div class="foo">
  <div class="bar">
    <button class="countthem">should give 3</button>
  </div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<div class="foo">
  <div class="bar">
    <button class="countthem">should give 2</button>
  </div>
  <div class="bar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以这样做。访问所有.bar divs的顶级父级，然后将其计为后代。

＆＃13;

＆＃13;

$(document).on("click", '.countthem', function() {
  let n = $(this).parents(".foo").children('.bar').length;
  $(".number").text("There are " + n + " divs.");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="number"></span>
<div class="foo">
  <div class="bar"><button class="countthem">should give 3</button></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<div class="foo">
  <div class="bar"><button class="countthem">should give 2</button></div>
  <div class="bar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您必须选择祖父母元素并在.bar元素

中搜索

$(document).on("click", '.countthem', function() {
  var n = $(this).parent().parent().find('.bar').length;
  $(".number").text("There are " + n + " divs.");
});