尋找兄弟的多個選擇器

Question

我正在嘗試使用多個選擇器尋找最近的兄弟姐妹..但是當我只想要最接近的跨度，跨度時，我一直在調整計數的每個項目。

FIDDLE位置：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

你有幾個錯誤，從不引用元素被點擊上適當this，對沒有得到正確的層次結構。

$("#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');是不必要的，因爲$(this)是指在
• 你想要的值，而不是文字文本域所鍵入的文本區域的方式，所以使用.val()代替的.text()
• 根據你的代碼，textareas的父母將是身體，所以你想要的是選擇以前的標籤元素與.prevAll('label:first')

Answer 2

我會說你的結構不是很好。

我把它改成這樣：

<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> 

則改爲javascript來：

$(".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"); 
    } 

}); 

不過它不是最好的方法，因爲它依賴於DOM結構，但它是一個啓動。

看到它在jsfiddle上的行動。

Answer 3

這裏有幾件事情應該修正。

1. parent（）表示與您想象的不同。

結賬the documentation。在你提供的小提琴中的HTML中，沒有一個textareas具有除html正文以外的父項......它們都共享同一個父項！

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

如果您希望SchedulingComment具有相關的父項，則必須將其包裝在某個項目中。現在$（「＃schedulingComment」）。parent（）意思是「看看div裏面叫做.input-section的東西」。

2.使用這關鍵字更好

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

這太瘋狂了。爲什麼不只是做

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

它更有意義，並且不需要任何額外的DOM查找。

3.說到其中...... text（）不能這樣工作。

使用val（）而不是 text（）用於獲取輸入框中的字符串。

4.使用選擇，當你更新你的HTML

當你改變你的HTML是

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

你的方式是痛苦的......你將不得不去更新所有你的JavaScript也是如此。它會吮吸，你會忘記你放置東西的所有地方。改用描述性類更好。我會做這樣的事情：

<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> 

和我的JavaScript看起來是這樣的：

$(".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"); 
    } 
});