Question

我正在尝试创建一个循环，该循环根据是否有任何<p>元素具有所选类从我的JSON数组中删除JSON对象。

所以，我希望它的工作方式是在提交表单时检查是否有任何<p>元素具有所选类。如果选择了任何元素，我将使用其文本值遍历它们以将其从JSON数组中删除，然后我console.log()数组。

我可以使用循环内的代码从数组中删除单个对象，但似乎无法使其与我的循环配合使用。我该如何实现？

JS

$('#form').on('submit', function(e){
    e.preventDefault();

    if( $('.postcodes p.selected').length ){
        $('.postcodes p.selected').each(function(){
            var data_filter = area_json.filter((element) => {
                return element.Sector !== $(this).text();
            });
        });
    }

    console.log(data_filter); 
}); 

var area_json = [
    {
       "Sector": "AB10 1",
       "Locality": "Thistle Court,Aberdeen",
       "Residential": 1147
    },
    {
       "Sector": "AB10 6",
       "Locality": "Great Western Road,Aberdeen",
       "Residential": 4596
    },
    {
       "Sector": "AB10 7",
       "Locality": "Holburn Street,Aberdeen",
       "Residential": 4380
    }
]

HTML

<form id="form" action="" method="post">
    <div class="postcodes">
        <p class="selected">AB10 1</p>
        <p class="selected">AB10 6</p>
    </div>
    <input type="submit" value="submit">
</form>

Answer 1

尝试这样。在您的.each循环中，尝试推送数据，然后在过滤器中检查.indexOf()。这会给你结果。

我将.filter移出了.each循环。因为在循环内循环是一个坏主意，而且会浪费时间。

var area_json = [
    {
       "Sector": "AB10 1",
       "Locality": "Thistle Court,Aberdeen",
       "Residential": 1147
    },
    {
       "Sector": "AB10 6",
       "Locality": "Great Western Road,Aberdeen",
       "Residential": 4596
    },
    {
       "Sector": "AB10 7",
       "Locality": "Holburn Street,Aberdeen",
       "Residential": 4380
    }
];
$('#form').on('submit', function(e){
    e.preventDefault();

    if( $('.postcodes p.selected').length ){
      var data = [];
        $('.postcodes p.selected').each(function(){
            data.push($(this).text());
        });
       var data_filter = area_json.filter((element) => {
        return (data.indexOf(element.Sector)<0)
       });
    }

    console.log(data_filter); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="" method="post">
    <div class="postcodes">
        <p class="selected">AB10 1</p>
        <p class="selected">AB10 6</p>
    </div>
    <input type="submit" value="submit">
</form>

Answer 2

您需要使用each(function(index, item)和$(item).text()，分别在其中移动控制台。

 if( $('.postcodes p.selected').length ){
        $('.postcodes p.selected').each(function(index, item){
            var data_filter = area_json.filter((element) => {
                return element.Sector !== $(item).text();
            });
             console.log(data_filter); 
        });
    }

$('#form').on('submit', function(e){
    e.preventDefault();
    var data_filter = [];
    if( $('.postcodes p.selected').length ){
        $('.postcodes p.selected').each(function(index, item){
            data_filter = area_json.filter((element) => {
                return element.Sector !== $(item).text();
            });
            
        });
    }

    console.log(data_filter); 
}); 

var area_json = [
    {
       "Sector": "AB10 1",
       "Locality": "Thistle Court,Aberdeen",
       "Residential": 1147
    },
    {
       "Sector": "AB10 6",
       "Locality": "Great Western Road,Aberdeen",
       "Residential": 4596
    },
    {
       "Sector": "AB10 7",
       "Locality": "Holburn Street,Aberdeen",
       "Residential": 4380
    }
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="" method="post">
    <div class="postcodes">
        <p class="selected">AB10 1</p>
        <p class="selected">AB10 6</p>
    </div>
    <input type="submit" value="submit">
</form>

Answer 3

您可以仅通过执行.text()来检索选定的选项[...$('.selected')].map(p => $(p).text())，而不是过滤出已经通过includes()方法选择的area_json数组项

var area_json = [
    {
       "Sector": "AB10 1",
       "Locality": "Thistle Court,Aberdeen",
       "Residential": 1147
    },
    {
       "Sector": "AB10 6",
       "Locality": "Great Western Road,Aberdeen",
       "Residential": 4596
    },
    {
       "Sector": "AB10 7",
       "Locality": "Holburn Street,Aberdeen",
       "Residential": 4380
    }
];

const res = area_json.filter(item => ![...$('.selected')].map(p => $(p).text()).includes(item.Sector));

console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="" method="post">
    <div class="postcodes">
        <p class="selected">AB10 1</p>
        <p class="selected">AB10 6</p>
    </div>
    <input type="submit" value="submit">
</form>

Answer 4

这是我一起发布的工作版本：

$(document).ready(function() {

  var data_filter = [];
  var data_filterChecked = [];

  $('#form').on('submit', function(e) {
    e.preventDefault();
    data_filterChecked = [];

    if ($('.postcodes p.selected').length) {
      $('.postcodes p.selected').each(function(i, element) {
        var lookingFor = $(element).text();
        data_filter = area_json.filter((element) => {
          if (element.Sector !== lookingFor) {
            data_filterChecked.push(element);
          }

        });

      });
      data_filter = data_filterChecked;
    }

    console.log(data_filter);
  });

  var area_json = [{
      "Sector": "AB10 1",
      "Locality": "Thistle Court,Aberdeen",
      "Residential": 1147
    },
    {
      "Sector": "AC10 6",
      "Locality": "Great Western Road,Aberdeen",
      "Residential": 4596
    },
    {
      "Sector": "AB10 7",
      "Locality": "Holburn Street,Aberdeen",
      "Residential": 4380
    }
  ]

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form id="form" action="" method="post">
  <div class="postcodes">
    <p class="selected">AB10 1</p>
    <p class="selected">AB10 1</p>
  </div>
  <input type="submit" value="submit">
</form>

在循环中删除多个JSON对象

4 个答案: