使用hasClass循环输入

Question

I have a HTML form that I need to perform a loop through using jQuery to check whether each element has a required class attached to it.

Here's my HTML layout:

<form>
    <p class="form-field  first_name pd-text required">
        First Name<br>
        <input type="text" name="first_name">
    </p>
    <p class="form-field  last_name pd-text required">
        Last Name<br>
        <input type="text" name="last_name">
    </p>
    <p class="form-field  mobile pd-text required">
        Mobile<br>
        <input type="text" name="mobile">
    </p>
    <p class="form-field  email pd-text">
        Email<br>
        <input type="text" name="email">
    </p>
    <p class="form-field  skype pd-text">
        Skype<br>
        <input type="text" name="skype">
    </p>
</form>

As you can see only some of the p elements have a required class attached, I need to do some kind of foreach loop and append an asterisk sign after the text, so for example:

    <p class="form-field  first_name pd-text required">
        First Name
        <input type="text" name="first_name">
    </p>

Would become

    <p class="form-field  first_name pd-text required">
        First Name *
        <input type="text" name="first_name">
    </p>

Is this possible inside jQuery?

Answer 1

You can use :

$('.required').each(function() {
  $(this).contents()[0].textContent += ' *';
});

Working Demo

Answer 2

I managed to fix this using the following :

$('.required').each(function() {
    $(this).html(function(index, currentHtml) {
        return currentHtml.replace('<br>', '*<br>');
    });
});