Append text to class when id changes

Question

I want to append text when some id changes.

<div class="col-sm-1">
    <input name="stime" type="text" class="form-control" id="stime" placeholder="00:00" required maxlength="5" />
    <span class="form-control-feedback"></span>
</div>

When stime changes, I want to append a text to the form-control-feedback class.

This is my script, but nothing changes.

$("#stime").change(function (e) {
    var time = $("#stime").val();

    $("#stime").find(".form-control-feedback").append("* Check Format Time (HH:mm)");
});

thank you, it solved.

```$(".form-control-feedback").append("* Check Format Time (HH:mm)");``` — miemengniao, Dec 22 '22 at 02:02
@Don'tPanic That's not the issue here, the asker is trying to use `.find()` to get a sibling element. — Joundill, Dec 22 '22 at 03:02
@Joundill If that is really what the OP is trying to do, then there are 2 issues here - the dup I linked addresses one of them. You said the same thing in your answer ... ? — Don't Panic, Dec 22 '22 at 03:13
If you are really trying to do this for multiple sets of `input`s (this seems unlikely since you have an ID here), the best way IMO is to traverse *up* the DOM to the closest enclosing block element, and then search *down* to the element you want to change. Eg: `$('input').on('change', function() { $(this).closest('.col-sm-1').find('form-control-feedback').text('* Check Format Time (HH:mm)'); });`. A good reference for the general approach: https://stackoverflow.com/questions/14460421/get-the-contents-of-a-table-row-with-a-button-click — Don't Panic, Dec 22 '22 at 03:16
@Don'tPanic It's true that `.text()` works better than `.append()` in OP's case, but that's not really what the question is about. `.append()` will also technically work (just only the first time) — Joundill, Dec 22 '22 at 03:34

score 1 · Answer 1 · answered Dec 22 '22 at 02:02

You want to use .siblings() instead of .find() because the .form-control-feedback element isn't a child of #stime, but instead a sibling.

You're also probably looking for .text(), not .append()

$("#stime").change(function (e) {
  var time = $("#stime").val();
  $("#stime").siblings(".form-control-feedback").text("* Check Format Time (HH:mm)");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-1">
  <input name="stime" type="text" class="form-control" id="stime" placeholder="00:00" required maxlength="5">
  <span class='form-control-feedback'></span>
</div>

score 1 · Answer 2 · edited Dec 22 '22 at 05:21

you can do the following

$("#stime").change(function () {
    $(this).siblings(".form-control-feedback").append("* Check Format Time (HH:mm)");
});

but since the input is unique by id I'd rather assign the id to the span as well. Then

$("#stime").change(function () {
    $("#form-control-feedback").append("* Check Format Time (HH:mm)");
});

or

$("#stime").change(function () {
    $("#form-control-feedback").text("* Check Format Time (HH:mm)");
});

if you don't want to append but rather replace

Append text to class when id changes

2 Answers2