Question

我有一个选项卡，每个选项卡中都有一些具有“数据”属性的div。我需要每个选项卡的所有数据属性。

$('#myTab a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

$(function() {
  $('#myTab a:last').tab('show');
})

$('.save').on('click', function() {
  var dataNid = [];

  $('.tab-pane').each(function(index, value) {

    $(this).find('div').each(function(i, item) {
      dataNid.push($(this).data('id'));
    })
    console.log('Tab Pane' + index + ' TAB ID: ' + $(this).attr('id') + ' DATA-NID: ' + dataNid);
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="container">
  <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="home">
      <div data-id="1">1</div>
      <div data-id="2">2</div>
      <div data-id="3">3</div>
    </div>
    <div class="tab-pane" id="profile">
      <div data-id="1">1</div>
    </div>
    <div class="tab-pane" id="messages">
      <div data-id="3">3</div>
      <div data-id="1">1</div>
    </div>
  </div>
</div>

<button class="save btn btn-default">Save</button>

目前，我的状态如下：
Tab Pane0 TAB ID：主页DATA-NID：1,2,3
标签窗格1 TAB ID：配置文件DATA-NID：1,2,3,1
Tab Pane2 TAB ID：消息DATA-NID：1,2,3,1,3,1

但是我想要这样：
Tab Pane0 TAB ID：主页DATA-NID：1,2,3
标签窗格1 TAB ID：个人资料DATA-NID：1
Tab Pane2 TAB ID：消息DATA-NID：3,1

有人可以帮我解决这个问题吗？

谢谢

Answer 1

由于该代码段正在运行，并且您花了一些时间来提供它，因此这里是解决方案。

只需移动数组dataNid，以便为每个窗格使用一个新的数组。

$('#myTab a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

$(function() {
  $('#myTab a:last').tab('show');
})

$('.save').on('click', function() {


  $('.tab-pane').each(function(index, value) {

    var dataNid = [];

    $(this).find('div').each(function(i, item) {
      dataNid.push($(this).data('id'));
    })
    console.log('Tab Pane' + index + ' TAB ID: ' + $(this).attr('id') + ' DATA-NID: ' + dataNid);
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="container">
  <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="home">
      <div data-id="1">1</div>
      <div data-id="2">2</div>
      <div data-id="3">3</div>
    </div>
    <div class="tab-pane" id="profile">
      <div data-id="1">1</div>
    </div>
    <div class="tab-pane" id="messages">
      <div data-id="3">3</div>
      <div data-id="1">1</div>
    </div>
  </div>
</div>

<button class="save btn btn-default">Save</button>

Answer 2

问题在于您的var dataNid = []在函数调用之前已初始化。

因此，由于您不必在每次函数调用时都重新初始化数组，因此您只需将其添加到同一dataNid

$('.save').on('click', function(){
    //var dataNid = []; //remove this

    $('.tab-pane').each(function (index, value) {
            var dataNid = []; //move it HERE!
            $(this).find('div').each(function(i, item){
                dataNid.push($(this).data('id'));
            })
            console.log('Tab Pane' + index + ' TAB ID: ' + $(this).attr('id') + ' DATA-NID: ' + dataNid); 
        });
});

如何在每个选项卡中获取所有数据属性值

2 个答案: