2014-11-05 47 views
0

我有HTML,跨度內2jQuery的查找功能不能正常工作

<select> ... </select> 

元素與類spanClass。我現在想選擇使用jQuery的選擇與此代碼:

jQuery(document).ready(function() { 
    spans = jQuery('.spanClass'); 
    spans.each(function() { 

     var inputs = jQuery(this).find('select'); 
     console.log(inputs);// This is working 
     inputs.each(function() { 
      alert('test'); //This not 
     }); 
    }); 
}); 

HTML:

<table> 
<tr> 
    <td> 
     <select name="een"> 
      <option> test </option> 
     </select> 
    </td> 
</tr> 

     <select name="twee"> 
      <option> test </option> 
     </select> 
    </td> 
</tr> 
</table> 

但是,這是行不通的,任何人可以告訴我爲什麼?

+2

它看起來很好 - 你可以分享的HTML樣品 – 2014-11-05 03:01:47

+3

您有不正確的DOM。你沒有在tr和td元素中正確包裝第二個選擇。對於你所提到的你也很好。 http://jsfiddle.net/ca8st4oz/ – 2014-11-05 03:06:23

+1

我不認爲跨度(內聯元素)應該包含表格(塊元素)。根據文檔類型的不同,該表格可能會在其應有範圍容器外部構建。事實上,某人有這個HTML工作在一個小提琴並不意味着它會在所有瀏覽器中的所有文檔類型下工作。 – 2014-11-05 03:24:23

回答

1

首先>認沽表(它是這樣做的正確方法)

二>糾正你的table標籤如下面的圖像和代碼(其中有些是不正確的!)

現在>使用這些代碼

HTML:

<div class="divClass"> 
<table> 
    <tr> 
     <td> 
      <select name="een"> 
       <option> test </option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <select name="twee"> 
       <option> test </option> 
      </select> 
     </td> 
    </tr> 
</table> 
</div> 

的jQuery:

jQuery(document).ready(function() { 
    spans = jQuery('.divClass'); 
    spans.each(function() { 

     var inputs = jQuery(this).find('select'); 
     console.log(inputs); 
     inputs.each(function() { 
      console.log(jQuery(this).prop("name")); 
     }); 
    }); 
}); 

結果:

enter image description here

0
var inputs = jQuery(this).find('select'); // Isn't inputs empty jQueryObject? length 0? 

如果輸入爲空jQueryObject,不會調用.each()傳遞的回調函數。裏面的div代替跨度