如何從$訪問道具（選擇）。每個（）

Question

這裏的HTML片段

<select multiple> 
    <option value="1">Option 1</option> 
    <option value="2" selected>Option 2</option> 
    <option value="3" selected>Option 3</option> 
</select> 

這裏的腳本

$('select option').each(function(index, elem) { 
    if (elem.prop('selected')) { 
     // Find a checkbox somewhere in the page that correspond with the option 
     // and then check it. 
    } 
}); 

然而，這引發elem.prop is not a function。

即使是一個簡單的console.log(elem.prop('selected'))不起作用。

我該怎麼辦？

Answer 1

你的問題是因爲elem引用的元素，而不是一個jQuery對象。要做到你需要什麼，你需要包裝elem這樣的：

$('select option').each(function(index, elem) { 
 
    var $elem = $(elem); 
 
    if ($elem.prop('selected')) { 
 
    console.log($elem.val()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="1">Option 1</option> 
 
    <option value="2" selected>Option 2</option> 
 
    <option value="3" selected>Option 3</option> 
 
</select>

但是你要注意，你的循環是多餘的。您可以使用:selected選擇和完全避免循環：

var $elem = $('select option:selected'); 
 
console.log($elem.val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="1">Option 1</option> 
 
    <option value="2" selected>Option 2</option> 
 
    <option value="3" selected>Option 3</option> 
 
</select>

Answer 2

$('select option').each(function(index, elem) { 
 
    if ($(elem).prop('selected')) { 
 
    // Find a checkbox somewhere in the page that correspond with the option 
 
    // and then check it. 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="1">Option 1</option> 
 
    <option value="2" selected>Option 2</option> 
 
    <option value="3" selected>Option 3</option> 
 
</select>

您應該將ELEM在$()