多个选择器寻找同级

Question

I am trying to look for the nearest sibling using multiple selectors.. but I keep getting each of my items adjusting the count when I just want the closest span, span.

FIDDLE HERE: http://jsfiddle.net/70o9u96s/1/

$("#SchedulingComment, #DiagramComment, #InspNotes, #PreInspHoursNotes, #ActualInspNotes, #HoursNotes").keyup(function(){

    var activeItem = $(this).attr('id');

    var count = $("#" + activeItem).text().length;
    var adjust = 255 - count;
    var placeCount = $("#" + activeItem).parent().find("span span");
    var colorCount = $("#" + activeItem).parent().find("span");

    placeCount.text(adjust);

    if (adjust < 0){
        colorCount.css("color","red");
    } else {
        colorCount.css("color","black");
    }

});

Answer 1

You have several errors, from not referencing the element being clicked on with this properly, to not getting the hierarchy correct.

$("#SchedulingComment, #DiagramComment, #InspNotes, #PreInspHoursNotes, #ActualInspNotes, #HoursNotes").keyup(function () {
    var count = $(this).val().length;
    var adjust = 255 - count;
    var placeCount = $(this).prevAll('label:first').find("span span");
    var colorCount = $(this).prevAll('label:first').find("span");
    placeCount.text(adjust);
    if (adjust < 0) {
        colorCount.css("color", "red");
    } else {
        colorCount.css("color", "black");
    }
});

jsFiddle example

• var activeItem = $(this).attr('id'); is unnecessary as $(this) is the way to refer to the textarea being typed in
• With textareas you want the value, not the text, so use .val() instead of .text()
• According to your code, the parent of the textareas would be the body, so what you want instead is to select the previous label element with .prevAll('label:first')

Answer 2

I'd say your structure is not very good.

I've changed it to this:

<div class="js-length-monitor-wrapper">
    <label>SchedulingComment: <span class="js-length-monitor-info"><span class="js-length-monitor-counter">255</span> characters remaining.</span></label>
    <textarea id="SchedulingComment" cols="30" rows="3" class="js-length-monitor"></textarea>
    </div>
<div class="js-length-monitor-wrapper">
    <label>SchedulingComment: <span class="js-length-monitor-info"><span class="js-length-monitor-counter">255</span> characters remaining.</span></label>
    <textarea id="DiagramComment" cols="30" rows="3" class="js-length-monitor"></textarea>
</div>

Then changed javascript to:

$(".js-length-monitor").keyup(function(){
    var count = $(this).val().length;
    var adjust = 255 - count;
    console.log(adjust);
    var placeCount = $(this).prev('label').find(".js-length-monitor-counter");
    var colorCount = $(this).prev('label').find(".js-length-monitor-info");

    placeCount.html(adjust);

    if (adjust < 0){
        colorCount.css("color","red");
    } else {
        colorCount.css("color","black");
    }

});

Still it is not the best approach, since it relies on DOM structure, but it's a starter.

See it in action on jsfiddle .

Answer 3

There are several things going on here that should be fixed.

1. parent() means something different than you think.

Check out the documentation . In the HTML you provided in the fiddle, none of the textareas have a parent other than the body of the html... they all share the same parent!

<label>SchedulingComment: <span><span>255</span> characters remaining.</span></label><br />
<textarea id="SchedulingComment" cols="30" rows="3"></textarea>

If you want the SchedulingComment to have a relevant parent, you must wrap it in something.

<div class="input-section">
    <label>SchedulingComment: <span><span>255</span> characters remaining.</span></label><br />
    <textarea id="SchedulingComment" cols="30" rows="3"></textarea>
</div>

Now $("#schedulingComment").parent() means "look at the stuff inside the div called .input-section".

2. Use the this keyword better

var activeItem = $(this).attr('id');
var count = $("#" + activeItem).text().length;

That's crazy. Why not just do

var count = $(this).text().length;

It makes far more sense, and doesn't require any additional DOM lookups.

3. Speaking of which... text() doesn't work that way.

Use val() not text() for getting the string in the input box.

4. Using selectors your way is painful when you update your html

When you change your html to be

<span><div>255</div></span>

... you're going to have to go update all of your javascript too. It's going to suck, and you're going to forget all the places where you put things. It's MUCH better to use descriptive classes instead. I would do something like this:

<div class="input-section">
    <label>SchedulingComment:
        <span class="character-count-holder">
            <span class="character-count">255</span>
            characters remaining.
        </span>
    </label><br />
    <textarea id="SchedulingComment" cols="30" rows="3"></textarea>
</div>

and my javascript would look something like:

$(".input-section input").keyup(function(){
    var section = $(this.parent());
    var count = 255 - $(this).val().length;
    section.find(".character-count").text(count);
    if(count < 0) {
        section.find(".character-count-holder").css("color", "red");
    } else {
        section.find(".character-count-holder").css("color", "red");
    }
});