jQuery遍歷 - 發現之前的標籤到當前輸入

只是一個簡單的問題，因爲我沒有長時間使用jQuery。jQuery遍歷 - 發現之前的標籤到當前輸入

在這種情況下，是否有更簡潔/更快捷的方式來獲取標籤的html。

這裏是一個簡單化版本爲例，

<tr> 
    <td> 
     <label>Please fill in name:</label> 
    </td> 
    <td> 
     <input type="text" id="txtName" class="validate" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <label>Date of Birth:</label> 
    </td> 
    <td> 
     <input type="text" id="txtDOB" class="validate" /> 
    </td> 
</tr>

這是jQuery的片段我使用目前搶爲標籤的HTML。

$(document).ready(function(){ 
    $('.validate').each(function(){ 
     if(!$(this).val()) 
     { 
      var label = $(this).parent().prev().find('label').html(); 
      alert(label); 
     } 
    }); 
});

任何想法表示讚賞

來源

2012-03-07 Mark Walters

看起來好像沒什麼用9秒 – 2012-03-07 12:33:03

是的，有另一種巧妙的方法，通過使用Closest()代替Parent()

考慮下面的代碼這樣做：

$(document).ready(function(){ 
    $('.validate').each(function(){ 
     if(!$(this).val()) 
     { 
      var label = $(this).closest("tr").find('label').html(); 
      alert(label); 
     } 
    }); 
});

Closest()：獲取與選擇器相匹配的第一個元素，從當前元素開始並前進通過DOM樹。

來源

2012-03-07 12:33:46

打我：p哈哈！這就是我要發佈的內容。 – Benno 2012-03-07 12:34:33

@Benno：大聲笑，我已經遭受了這個事情許多次，Stackoverflow的用戶是該死的快速:) – 2012-03-07 12:35:43

@MohammedElSayed：謝謝，這是一個小整潔，這正是我真正想要的。當我可以像你最快的時候，我會接受這個答案。 – 2012-03-07 12:41:56

是的，你可以稍微縮短：

$(document).ready(function(){ 
    $('.validate').each(function(){ 
     if(!$(this).val()) 
     { 
      var label = $(this).parents('tr').find('label').html(); 
      alert(label); 
     } 
    }); 
});

來源

2012-03-07 12:34:17 linuxeasy

我會添加這個作爲一個答案，即使它是一種從你的問題改道：

您正在使用非表格數據的基於表格的佈局，你應該有佈局，如

<div> 
<label>Please fill in name:</label> 
<input type="text" id="txtName" class="validate" /> 
</div> 
<div> 
<label>Date of Birth:</label> 
<input type="text" id="txtDOB" class="validate" /> 
</div>

在這種情況下，jQuery變成超簡單：

$('.validate').each(function(){ 
     if(!$(this).val()) 
     { 
      var label = $(this).prev('label').html(); 
      alert(label); 
     } 
    });

活生生的例子：http://jsfiddle.net/MDFEm/

來源

2012-03-07 12:37:51 Jamiec

感謝這個例子，是有道理的。 – 2012-03-07 12:43:03

你應該使用「的」標籤上的屬性，它不僅是語義/訪問它爲您提供了一個較短的選擇：

<table> 
    <tr> 
     <td> 
     <label for="txtName">Please fill in name:</label> 
     </td> 
     <td> 
     <input type="text" id="txtName" class="validate" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <label for="txtDOB">Date of Birth:</label> 
     </td> 
     <td> 
     <input type="text" id="txtDOB" class="validate" /> 
     </td> 
    </tr> 
</table>

$(document).ready(function(){ 
    $('.validate').each(function(){ 
    if(!$(this).val()) 
    { 
     var label = $('label[for="'+$(this).attr('id')+'"]').html(); 
     alert(label); 
    } 
    }); 
});

來源

2012-03-07 12:49:41 Tjkoopa

感謝這個替代版本，我通常在我的標籤上使用'for'屬性。我只是提供了一個「無褶邊」的例子來展示我想要達到的目標。 – 2012-03-07 14:11:01

jQuery遍歷 - 發現之前的標籤到當前輸入

回答

相關問題