Question

我有几个具有相同类属性的div。有一个

。我想使用点击的索引

在正确的div中插入新的动态内容。

e.g。我有：

<div class="subPage">...</div>
<div class="subPage">...</div>
<div class="subPage">...</div>

我单击第二个选项卡，我想将内容添加到第二个子页面。我怎么做到这一点？

Answer 1

您可以使用index()方法。

例如，

$(".tab").click(function(){ // where tab is the common class name of your tabs
  var index = $(this).index();
  $(".subPage").eq(index).append(); // you can access the corresponding subpage
});

Answer 2

现场演示： http://jsfiddle.net/don/xayy4qmk/

HTML：

<div class="subPage">1</div>
<div class="subPage">2</div>
<div class="subPage">3</div>

<div class="clear"></div>

<div class="boxcontent">Box 1: </div>
<div class="boxcontent">Box 2: </div>
<div class="boxcontent">Box 3: </div>

jQuery：

$('body').on('click', '.subPage', function() {
    var clickedEq = $('.subPage').index(this);
    var numberEq = parseFloat(clickedEq)+1;
    $('.boxcontent').eq(clickedEq).append('You clicked, and here i am, the content to box ' + numberEq + '.');
});

<强> CSS：

.subPage {
    width: 50px;
    height: 50px;
    background: #DDD;
    margin-right: 10px;
    float: left;
    text-align: center;
    line-height: 50px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #808080;
    cursor: pointer;
}
.clear {
    clear: both;
}
.boxcontent {
    padding: 10px;
    background: #F5F5F5;
    margin-top: 20px;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

Answer 3

试试这个

   $('body').on('click', '.subPage', function () {
   $('.boxcontent').eq($(this).index()).append('You clicked, and here i am, the content to box '+($(this).index()+1)+ '.');
    });

Answer 4

试试这个

$('body').on('click', '.subPage', function() {
    $(this).html('You clicked, and here i am, the content to box.');
});

这是示例链接 http://jsfiddle.net/patelmit69/37675jow/

使用jquery索引添加内容以更正html元素

4 个答案:

试试这个