jQuery - 獲取與所選輸入的id相同名稱的下一個元素

首先，我想爲那裏的可怕標題道歉，但這是我總結我的問題的最佳方式。jQuery - 獲取與所選輸入的id相同名稱的下一個元素

目前，我使用jQuery腳本，該腳本在input:text的blur上檢查輸入的文本值是否大於某個值。如果不是，則輸入將突出顯示爲紅色 - 但接下來我想要發生的情況是在鄰近列中有一個<p>以更改文本。

我的HTML看起來像這樣：

<tr> 
     <td width="15%"><label for="example">Hello world</label></td> 
     <td width="70%"><input type="text" class="" id="example" value=""/></td> 
     <td width="15%"><p name="example"></p></td> 
</tr>

而且我的jQuery/CSS是：

<style type="text/css"> 
    .fail{ 
     border:2px red solid; 
    } 
    </style> 

    <script type="text/javascript"> 
    /* Inline, onBlur validation 
    Text */ 
    $('input:text').blur(function() { 
     if ($(this).val().length <= 2) { 
      $(this).attr('class', 'fail'); 
      }else{$(this).attr('class', '');} 
    }); 
    </script>

是否有可能，在blur以某種方式調用下一個元素具有相同name的選擇輸入的id，然後改變它的文本？我知道這一定是一個艱難的動態難題來解決，但這是我真正需要的。

過去，我通過重複每個元素的代碼來獲得相同的效果，但這在這裏並不合適。

謝謝你的任何建議，你可以給我！

來源

2011-10-12 Singular1ty

zzzzBov是正確的但它會更好地使用上下文來提高效率和/或標記名。另外添加一個引用$（this）的變量。

var $this = $(this); 
$('p[name="'+$this.attr('id')+'"]', $this.closest('tr')).text('foo bar baz');

評論以上和zzzzBov的回答之間的差異後編爲：

$('[name="'+$(this).attr('id')+'"]') 
// will start traversing the DOM starting at the beginning of the 
// document. Largest search. 

$('p[name="'+$this.attr('id')+'"]') 
// will first call getElementsByTagName and try to find a match, smaller search. 

$('p[name="'+$this.attr('id')+'"]', $this.closest('tr')) 
// will only search the contents of the closest('tr') tag 
// that is an ancestor of your input. Even smaller search.

一般來說是更具體的用jQuery選擇可以提高性能與特點。另外使用變量來存儲諸如var $this = $(this);或var $myElement = $('#myElement')等選定元素比反覆創建相同選擇器更有效。記住jQuery和選擇器一樣高效，但你可以使用它來獲得更大的潛力。

來源

2011-10-12 01:03:45

'約翰Hartsock'這將不同於@zzzzBov通過使用「父母」？我還是新來的'jQuery'，所以原諒我的無知...... – Singular1ty

@ user-Unknown ....看我的編輯 –

啊，謝謝約翰，我現在會試用...我沒有甚至想到那種效率。謝謝！鑑於你在那裏的額外幫助，我給你我的剔號 - 感謝你的幫助！ – Singular1ty

在blur回調的背景下：

$('[name="'+$(this).attr('id')+'"]').text('foo bar baz');

來源

2011-10-12 00:59:36 zzzzBov

這對我來說非常合適，非常感謝！出於興趣，這段代碼應該可以改變所有其他屬性，對吧？如果使用'$（'[name =''+ $（this）.attr（'id'）+'「]'）。attr（'class'，'fail-text'）;'.. 。？ – Singular1ty

你想使用'addClass'函數向dom節點添加一個類。 – zzzzBov

jQuery - 獲取與所選輸入的id相同名稱的下一個元素

回答

相關問題