Question

我需要某种机制来给我这个：点击父母后 - ＆gt;给我所有孩子的价值观。 - ＆GT;点击子值 - ＆gt;给我所有子项值。

Item <- click on it          Item <- click on it
--------------------         --------------------
Item1 <- click on it   OR    Item1
Item2                        Item2 <- click on it
--------------------         --------------------
Item11                       Item21

我想这会是html代码：

<div id="item"> Hello I am <strong>Item</strong>, click on me! I will give you <strong>Item1</strong> and <strong>Item2</strong>
    <div id="item1"> Hello I am <strong>Item1</strong>. Click on me I will give you <strong>Item11</strong>
        <div id="item11"> Hello I am <strong>Item11</strong>, there is no more element after me.</div>
    </div>
    <div id="item2"> Hello I am <strong>Item2</strong>. Click on me I will give you <strong>Item21</strong>!
        <div id="item21">Hello I am <strong>Item21</strong>, there is no more element after me.</div>
    </div>
</div>

Answer 1

如果使用Jquery选择器，则以下代码应该起作用：

var children = $(element).children();

只需用你需要的任何选择器替换元素。

Answer 2

试试这个：

$('div').click(function() {
  var c = $(this).children();
  console.log(c.text())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item">Hello I am <strong>Item</strong>, click on me! I will give you <strong>Item1</strong> and <strong>Item2</strong>
  <div id="item1">Hello I am <strong>Item1</strong>. Click on me I will give you <strong>Item11</strong>
    <div id="item11">Hello I am <strong>Item11</strong>, there is no more element after me.</div>
  </div>
  <div id="item2">Hello I am <strong>Item2</strong>. Click on me I will give you <strong>Item21</strong>!
    <div id="item21">Hello I am <strong>Item21</strong>, there is no more element after me.</div>
  </div>
</div>

Answer 3

您可以使用jQuery elements

找到下一个div，直到.nextUntill开始

$('strong').on('click', function() {
    var nexts = $(this).nextUntil('div');
})

＆＃13;

$('strong').on('click', function() {
  console.log($(this).nextUntil('div').length)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item">Hello I am <strong>Item</strong>, click on me! I will give you <strong>Item1</strong> and <strong>Item2</strong>
  <div id="item1">Hello I am <strong>Item1</strong>. Click on me I will give you <strong>Item11</strong>
    <div id="item11">Hello I am <strong>Item11</strong>, there is no more element after me.</div>
  </div>
  <div id="item2">Hello I am <strong>Item2</strong>. Click on me I will give you <strong>Item21</strong>!
    <div id="item21">Hello I am <strong>Item21</strong>, there is no more element after me.</div>
  </div>
</div>

＆＃13;

Answer 4

请参阅此https://jsfiddle.net/bnyjmp4c/

 <div id="item"> Hello I am <strong>Item</strong>, click on me! I will give you <strong>Item1</strong> and <strong>Item2</strong>
 <div id="item1"> Hello I am <strong>Item1</strong>. Click on me I will give you <strong>Item11</strong>
    <div id="item11"> Hello I am <strong>Item11</strong>, there is no more element after me.</div>
 </div>
 <div id="item2"> Hello I am <strong>Item2</strong>. Click on me I will give you <strong>Item21</strong>!
    <div id="item21">Hello I am <strong>Item21</strong>, there is no more element after me.</div>
</div>
</div>
<div class="children-show-div">
</div>
</div>

JS

$(document).ready(function() {
 $("div").on("click", function(event) {
 event.stopPropagation();
 var html ="";
  $(this).find("> div").each(function() {
     html += $(this).attr("id") + "<br/>";
  })

   $(".children-show-div").html(html)
  })
 })

Answer 5

＆＃13;

$('div').on("click", function(ev){
  var $children = $(this).children("div"); // get the children of type div
  // or var $children = $(this).find("div"); // to get the children and their sub children ...
  
  // test:
  $children.each(function() {
    console.log(this.id);
  });
  
  // stop the event from bubbling up
  ev.stopPropagation();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item">Hello I am <strong>Item</strong>, click on me! I will give you <strong>Item1</strong> and <strong>Item2</strong>
  <div id="item1">Hello I am <strong>Item1</strong>. Click on me I will give you <strong>Item11</strong>
    <div id="item11">Hello I am <strong>Item11</strong>, there is no more element after me.</div>
  </div>
  <div id="item2">Hello I am <strong>Item2</strong>. Click on me I will give you <strong>Item21</strong>!
    <div id="item21">Hello I am <strong>Item21</strong>, there is no more element after me.</div>
  </div>
</div>

＆＃13;

Answer 6

另一种方法是基于分析event object。

event.target是：

发起事件的DOM元素

target属性可以是为事件注册的元素或其后代。将event.target与此进行比较通常很有用，以确定是否由于事件冒泡而处理了事件。当事件冒泡
时，此属性在事件委派中非常有用

所以，因为你的div有一个id，我建议你去监听与该div相关的所有点击事件：

＆＃13;

$('#item').on('click', function(e) {
  //
  // If clicked outside the div (i.e.: on a strong tag) 
  // get the corresponding div element
  //
  var ele = e.target.tagName == 'DIV' ? 
         $(e.target) : $(e.target).closest('div');
  //
  // get all div children belonging to current ele
  //
  ele.children('div').each(function() {
    console.log(this.id);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="item"> Hello I am <strong>Item</strong>, click on me! I will give you <strong>Item1</strong> and <strong>Item2</strong>
    <div id="item1"> Hello I am <strong>Item1</strong>. Click on me I will give you <strong>Item11</strong>
        <div id="item11"> Hello I am <strong>Item11</strong>, there is no more element after me.</div>
    </div>
    <div id="item2"> Hello I am <strong>Item2</strong>. Click on me I will give you <strong>Item21</strong>!
        <div id="item21">Hello I am <strong>Item21</strong>, there is no more element after me.</div>
    </div>
</div>

＆＃13;

如何检索所有子元素和子元素？

6 个答案: