Question

在javascript（jquery）中，我检索以＆＃34; #error - ＆＃34;开头的元素列表。这工作正常。我遇到的问题是，在循环遍历数组时，我无法为数组元素赋值。

我正在使用此功能：

function HideErrorMessages(){
    var errors = $('*[id^="error-"]');
    for (var i = 0; i < errors.length; i++) {
        errors[i].css('display', none);
    }
}

正如你所看到的，我试过这个＆＃34; css＆＃34;可能性。不行。我也尝试过：

错误[I] .hide（）;
errors [i] .style.display =＆＃39; none＆＃39;;

但是当使用＆＃34; alert（errors [i]）＆＃34;，我得到一个回复，表明它包含＆＃34; span＆＃34;元素（这是正确的）。

那么如何在此循环中隐藏元素呢？

谢谢！

Answer 1

尝试通过jquery对象调用.hide()，

$('[id^="error-"]').hide();

您不需要逐个迭代这些元素。如果您通过括号表示法从jquery对象获取元素，那么它将返回本机javascript DOM节点。所以.css()会导致错误，因为它不是DOM节点的一部分。

Answer 2

errors[i]引用jQuery对象中的属性，该对象是选定的DOM对象。这些对象没有css函数，它是一个jQuery的东西。但是你可以使用jQuery eq来选择对象并访问jQuery方法：

errors.eq(i).css('display', 'none');

您还可以使用each迭代jQuery对象的每个元素：

$('*[id^="error-"]').each(function(){
    $(this).css('display', 'none');
});

Answer 3

我会这样。

＆＃13;

$('#buttonClick').on('click', function() {
  var showing = $(this).closest('.thumbBrowser').find('ul li:visible');
  var next = showing.last().next();
  if( next.length === 0 ) {
    next = $(this).closest('.thumbBrowser').find('ul li').first();
  }
  next.toggleClass('hidden').next().toggleClass('hidden');
  showing.toggleClass('hidden');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="thumbBrowser">
          <ul>
            <li class="thumbLeft caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/argus_thumb.jpg" alt="one"></a>
            </li>
            <li class="thumbRight caseStudy tint">
              <img src="images/adr_thumb.jpg" alt="two">
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/dd_thumb.jpg" alt="three">
            </li>
            <li class="hidden thumbRight caseStudy tint">
              <img src="images/cdp_thumb.jpg" alt="four">
            </li>
             <li class="hidden thumbRight caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/pm_thumb.jpg" alt="five"></a>
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/argus_thumb.jpg" alt="six">
            </li>
          </ul>
          <div class="cycleButton" id="buttonClick"><img src="images/cycleIcon.png"></div>
    </div>

＆＃13;

.hidden {
  display:none;
}

＆＃13;

迭代元素列表并隐藏它们

3 个答案: