CODEWITHSUNDEEP
jqueryhtmlcss
Denoteone
Denoteone

Reputation: 4055

addClass to a parent element with a specific class name

Question: 1. How do I reference a parent element by class name? And once I have referenced it how do I add a new class name while not removing the current class name?

  1. How would I reference a sibling element by class name?

Below is a structure of my current HTML:

<div class="form-group">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-4 col-xs-12 no-pad">
                <input type="text" class="form-control" id="employeeCount" name="employeeCount" placeholder="{{nls 'example_total_num'}}" value="{{employeeCount}}"></input>
                <i class="material-icons">error_outline</i>
                <div class="help-block">&nbsp;</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-12 no-pad">
                <input type="text" class="form-control" id="salesForceCount" name="salesForceCount" placeholder="{{nls 'example_sales_num'}}" value="{{salesForceCount}}"></input>
                <i class="material-icons">error_outline</i>
                <div class="help-block">&nbsp;</div>

            </div>
        </div>
    </div>
</div>

Below is the method that is tied to a blur event of the #salesForceCount input above:

 procSalesForceCount: function (e) {
    let $e = $(e.currentTarget);
    let val = parseInt($e.val());
    val = isNaN(val) ? null: val;
if (val > this.model.get('employeeCount')) {

  var error_message = `${val} is larger than employee count ${this.model.get("employeeCount")}`;

//add new class has-error to parent div with form-group class 
   $e.closest(".form-group").addClass("has-error");
  $e.siblings('.help-block').html(error_message);
  return;
}
// END

this.model.set({ salesForceCount: val });
  }

Upvotes: 0

Views: 1242

Answers (1)

maraaaaaaaa
maraaaaaaaa

Reputation: 8193

  1. How do I reference a parent element by class name? And once I have referenced it how do I add a new class name while not removing the current class name?
$(child).closest(".class-name").addClass("new-class");
  1. How would I reference a sibling element by class name?
$(selector).siblings(".class-name");

Or

$("selector + .class-name");

Upvotes: 2

Related Questions