仅显示最接近的 div javascript

Question

我有如下代码。重复5次，id加1

HTML：

<dl>
  <dt><label>Text na náramku:</label></dt>
  <dd><input class="nText" type="text" name="meno1" id="meno1" size="28" maxlength="128" placeholder="napíšte bez diakritiky" style='text-transform:uppercase' /></dd><dd class="info"><em>  "Namiesto srdiečka daj bodku"</em></dd>
</dl>
<dl>
<dt><label>Farba:</label></dt>
<dd>
<select name="farba1" id="farba1">
    <option value="0">Zvoľte...</option>
    <option value="1">Black</option>
</select>
</dd>
</dl>
<span id="srdce1" class="srdce" style="display:none;">
            <dl>
                <dt><label for="srdce_farba1">Farba:</label></dt>
                    <dd>
                        <select name="srdce_farba1" id="srdce_farba1">
                            <option value="0">Zvoľte...</option>
                            <option value="1">Black</option>
                        </select>
                    </dd>
            </dl>
</span>

如果在文本框中类 nText 是一个“点”，我想显示类 srdce 但只是第一次出现，而不是所有 5 个块。

我试过这段代码，但它不起作用：

javascript:

<script type="text/javascript">
        $('.nText').each(function() 
        {
            $('.nText').on('keyup', function() {
                function count(s1, letter) {
                    return (s1.length - s1.replace(new RegExp(letter, "g"), '').length);
                }

                var meno1 = $('.nText').val();
                var c = count(meno1, '\\.');

                if (c > 0)
                    $(".srdce:first").fadeIn('slow');
                else
                    $(".srdce:first").fadeOut('slow');

            });
        });
        </script>

Answer 1

您可以使用函数$.next() 来获取元素dl 的下一个兄弟。

                                    +----- Element dl
                                    |
                                    v
var $target = $(this).closest('dl').next().next('span.srdce:first');
                                                 ^
                                                 |
                                                 +----- Element span.srdce                                   

$('.nText').on('keyup', function() {
  function count(s1, letter) {
    return (s1.length - s1.replace(new RegExp(letter, "g"), '').length);
  }

  var meno1 = $(this).val();
  var c = count(meno1, '\\.');

  var $target = $(this).closest('dl').next().next('span.srdce:first');
  if (c > 0)
    $target.fadeIn('slow');
  else
    $target.fadeOut('slow');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
  <dt><label>Text na náramku:</label></dt>
  <dd><input class="nText" type="text" name="meno1" id="meno1" size="28" maxlength="128" placeholder="napíšte bez diakritiky" style='text-transform:uppercase' /></dd>
  <dd class="info"><em>  "Namiesto srdiečka daj bodku"</em></dd>
</dl>
<dl>
  <dt><label>Farba:</label></dt>
  <dd>
    <select name="farba1" id="farba1">
    <option value="0">Zvoľte...</option>
    <option value="1">Black</option>
</select>
  </dd>
</dl>
<span id="srdce1" class="srdce" style="display:none;">
            <dl>
                <dt><label for="srdce_farba1">Farba:</label></dt>
                    <dd>
                        <select name="srdce_farba1" id="srdce_farba1">
                            <option value="0">Zvoľte...</option>
                            <option value="1">Black</option>
                        </select>
                    </dd>
            </dl>
</span>

<!---- ----->


<dl>
  <dt><label>Text na náramku:</label></dt>
  <dd><input class="nText" type="text" name="meno2" id="meno2" size="28" maxlength="128" placeholder="napíšte bez diakritiky" style='text-transform:uppercase' /></dd>
  <dd class="info"><em>  "Namiesto srdiečka daj bodku"</em></dd>
</dl>
<dl>
  <dt><label>Farba:</label></dt>
  <dd>
    <select name="farba2" id="farba2">
    <option value="0">Zvoľte...</option>
    <option value="1">Black</option>
</select>
  </dd>
</dl>
<span id="srdce2" class="srdce" style="display:none;">
            <dl>
                <dt><label for="srdce_farba2">Farba:</label></dt>
                    <dd>
                        <select name="srdce_farba2" id="srdce_farba2">
                            <option value="0">Zvoľte...</option>
                            <option value="1">Black</option>
                        </select>
                    </dd>
            </dl>
</span>