嵌套循环问题与if状态

Question

我需要帮助这个嵌套的for循环和if语句。我想要做的是只显示这个li的站点，它包含在resultFlats数组对象(resultFlats[i].id)中。现在它不能正常工作了。

从li获得数字id和从resultFlats获得id都很好，但是if语句有问题。

​

var arrayFlats = $('.search-my-house');
// e.g.
var resultFlats = [
  {
    name: "test",
    id: "1"
  },
  {
    name: "test2",
    id: "4"
  }
]

for (var j = 0; j < arrayFlats.length; j++) {
    var number;
    number = $(arrayFlats[j]).children('.apartment-number').text();
    number = number.replace(/\s/g, "");
    number = Number(number);
    for (var i = 0; i < resultFlats.length; i++) {
        var showId = Number(resultFlats[i].id)
        if(showId === number) {
            $(arrayFlats[j]).css('display', 'flex')
        } else {
            $(arrayFlats[j]).css('display', 'none')
        }
    };
};

<li class="search-my-house" data-loggia="" data-taras="1">
    <div class="col description-small text-bold all-apartments apartment-number">22</div>
    <div class="col description-small text-bold all-apartments levels">piętro 1</div>
    <div class="col description-small text-bold all-apartments rooms">4</div>
    <div class="col description-small text-bold all-apartments">168m<sup>2</sup></div>
    <div class="col description-small text-bold all-apartments is-occupied">free</div>
    <div class="col description-small">
        <a href="wolne" class="button secondary">
            <span>download</span>
        </a>
    </div>
</li>

<li class="search-my-house" data-loggia="" data-taras="1">
    <div class="col description-small text-bold all-apartments apartment-number">1</div>
    <div class="col description-small text-bold all-apartments levels">piętro 1</div>
    <div class="col description-small text-bold all-apartments rooms">4</div>
    <div class="col description-small text-bold all-apartments">168m<sup>2</sup></div>
    <div class="col description-small text-bold all-apartments is-occupied">free</div>
    <div class="col description-small">
        <a href="wolne" class="button secondary">
            <span>download</span>
        </a>
    </div>
</li>

<li class="search-my-house" data-loggia="" data-taras="1">
    <div class="col description-small text-bold all-apartments apartment-number">184</div>
    <div class="col description-small text-bold all-apartments levels">piętro 1</div>
    <div class="col description-small text-bold all-apartments rooms">4</div>
    <div class="col description-small text-bold all-apartments">168m<sup>2</sup></div>
    <div class="col description-small text-bold all-apartments is-occupied">free</div>
    <div class="col description-small">
        <a href="wolne" class="button secondary">
            <span>download</span> 
        </a>
    </div>
</li>

​

Answer 1

您需要添加一个break语句，以便当您的条件匹配时，循环中断，其他resultFlats的css不受resultFlats语句的影响。所以，就像这样：

if(showId === number)
{
   $(arrayFlats[j]).css('display', 'flex');
   break;
} 
else 
{
   $(arrayFlats[j]).css('display', 'none')
}

Answer 2

其思想是: 1.先隐藏所有元素，然后显示匹配的实现。

var resultFlats = [
  {
    name: "test",
    id: "1"
  },
  {
    name: "test2",
    id: "4"
  }
]
$('.search-my-house').css('display', 'none');
for (var i = 0; i < resultFlats.length; i++) {
  var showId = Number(resultFlats[i].id);
  $('.search-my-house').each(function() {
    var number = $('.apartment-number', this).text().replace(/\s/g, "");
    number = Number(number);
      if(showId === number) {
        $(this).css("display", 'flex');
      };
  });
}