選擇特殊的選擇

Question

例如我有這樣的代碼

<script> 

$(document).ready(function() {  
    $('span').each(function() {  

     $(this).html('<div></div>') ;  
     if ($(this).attr('id') == 'W0') { $(this > div ?!!!).text('0') } 
     if ($(this).attr('id') == 'W1') { $(this > div ?!!!).text('1') } 
     if ($(this).attr('id') == 'W2') { $(this > div ?!!!).text('2') } 

    });  
}); 

</script> 

<span id="W0"></span> 
<span id="W1"></span> 
<span id="W2"></span> 

但$(this > div)或$(this ' > div ')是錯誤的選擇&不起作用

那麼什麼ü人建議我應該做的？

Answer 1

您可以用它如下：

$(' > div', $(this)) 

文檔：http://api.jquery.com/child-selector/

OR

對於直接子元素，你可以使用children：

$(this).children('div') 

文檔：http://api.jquery.com/children/

OR

使用find

$(this).find(' > div') 

文檔：http://api.jquery.com/find/

Demo

Answer 2

您可以選擇一起傳遞context to jQuery

$(' > div ', this) 

或使用children()像

$(this).children('div') 

---

但您的解決方案可以做到

$(document).ready(function() { 
 
    var texts = { 
 
    W0: '0', 
 
    W1: '1', 
 
    W2: '2' 
 
    } 
 
    $('span').each(function() { 
 
    $('<div />', { 
 
     text: texts[this.id] 
 
    }).appendTo(this) 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span id="W0"></span> 
 
<span id="W1"></span> 
 
<span id="W2"></span>