Question

如果我有一些看起来像这样的代码...

<div id="one">
    <div id="two">
        <div id="three">
            <button type="button" name="button" id="clickme">Click Me</button>
        </div>
    </div>
</div>

<script type="text/javascript">
$('#clickme').click(function(){
    var parents = //get an array of the ids that clickme is inside
});
</script>

单击clickme按钮时，能否在jQuery中获得一，二，三的数组？

Answer 1

我在下面发布的代码有效，但是我想知道是否有更优雅的方法。

<script type="text/javascript">
$(document).ready(function(){
  var array = [];
  $("#clickme").parents("*").each(function(){
    if(this.id != ''){
      array.push(this.id);
    }
  });
  console.log(array);
});
</script>

Answer 2

您需要知道直到要升级到什么级别。例如，如果要一直到正文，可以使用.parentsUntil()

进行以下操作

$('#clickme').click(function(){
    var parents = $(this).parentsUntil("body");
    parents.each(function(){console.log(this.id);});
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
    <div id="two">
        <div id="three">
            <button type="button" name="button" id="clickme">Click Me</button>
        </div>
    </div>
</div>

如果您知道需要遍历#one，则可以执行以下操作：

 var parents = $(this).parentsUntil("#one");

Answer 3

您可以执行以下操作。

$('#clickme').on("click", function(){               
    var parents = $(this).parentsUntil("body");    
    var arrayOfIds = parents.map(function(index, item) { return item.id });  
        });

小提琴：http://jsfiddle.net/EM2cM/62/

我可以获取一个项目在jQuery中位于其中的所有div ID的数组吗？

3 个答案: