Question

我需要帮助使用if语句嵌套for循环。我想要做的只是在网站上显示包含在resultFlats对象数组（resultFlats[i].id）中的这些内容。现在它无法正常工作。

从li获取数字ID并从resultFlats获取ID工作正常，但if语句有错误

＆＃13;

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')
        }
    };
};

＆＃13;

<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>

＆＃13;

Answer 1

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

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');
      };
  });
}

if语句的嵌套循环问题

2 个答案: