Question

要开始这个问题，这不是像许多其他结构这样的方案：

<div>
    <div class="ErrorMessage"></div>
    <div class="ErrorMessage"></div>
    <div class="ErrorMessage"></div>
    <div class="ErrorMessage"></div>
</div>

我知道：first-of-type或：first-child适用于那些人。

我的情况是，当我在整个DOM的多个元素上调用同一个类，但它们并不都遵循相同的结构时。例如，我可能在页面的某个位置具有这种结构。

   <div class="appArea">
      <p class="ErrorMessage">
        Some text to be changed
      </p>
    </div>

    <div class="appArea">
      <div class="something-for-space">
        <p class="ErrorMessage">
          Some text
        </p>
      </div>
    </div>

    <div class="appArea">
      <table class="some-random-table">
        <tr>
           <td>        
             <p class="ErrorMessage">
                Some text
             </p>
           </td>
        </tr>
      </table>
   </div>

我的兴趣在于如何选择该类的第一个匹配项“ ErrorMessage”。我需要更改它的默认文本，并且我有一个正在运行的jQuery脚本，但它会更改每个“ ErrorMessage”的文本。我无法找到正确的选择器组合来确保仅更改第一个选择器。

供参考的小提琴：https://jsfiddle.net/md6f0cb8/41/

即使我为该类的所有实例更改了它，也不是世界末日。我可以用CSS隐藏其他实例（其他实例都是多余的）。但是，再次，我没有合适的选择器来确保仅显示第一个匹配项，而其他所有隐藏项。

非常感谢您的帮助！

Answer 1

您需要的是.eq() jQuery方法：

$(document).ready(function() {
  $(".ErrorMessage").eq(0).replaceWith("<span>Erreur : Veuillez vérifier les renseignements 		saisis ci-dessous. Certains champs sont obligatoires et d'autres présentent des contraintes de saisie particulières.</span>");
  $(".appArea span:first-of-type").addClass('testing');
});

.testing {
  font-size: 24px;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appArea">
  <p class="ErrorMessage">
    Some text to be changed
  </p><br/><br/>
</div>

<div class="appArea">
  <div class="something-for-space">
    <p class="ErrorMessage">
      Some text to be changed
    </p><br/><br/>
  </div>
</div>

<div class="appArea">
  <div class="someother-random-div">
    <p class="ErrorMessage">
      Some text to be changed
    </p>
  </div>
</div>

使用CSS选择器仅定位类的首次出现

1 个答案: