Показать только самый близкий div javascript

Question

У меня есть код, как показано ниже. Это повторяется в 5 раз, и идентификаторы увеличиваются на один

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>