jQuery 高级选择器
Posted
技术标签:
【中文标题】jQuery 高级选择器【英文标题】：jQuery advanced selector 【发布时间】：2010-10-26 19:52:52 【问题描述】：我可以在 jQuery 选择器方法中使用比较语句吗？ 例如。 我有一个由 php 生成的 div 列表，它们都使用相同的 CSS 类，但值属性为 1、2、3 等。我还有一个带有 id 的文本输入字段。该字段只能接受数字。我想选择具有与放入文本输入框中的值相匹配的值属性的 div（从长列表中）。 我可以这样写吗： $( '$(".someClass").val() == $("input#someId").val()' )
???
【问题讨论】：
一个DIV怎么会有一个值属性？ 任何元素都可以有任何属性。虽然 html 验证不会是积极的 【参考方案1】：$('.someClass').filter(function()
return $(this).attr('value') == $('input#someId').val() ;
)
【讨论】：
【参考方案2】：查看 CSS3 选择器页面：http://www.w3.org/TR/css3-selectors/。
推荐选择器：E[foo="bar"]，如 '.class[value="'+$('#inputId').val()+'"]'。
注意：未经测试。
【讨论】：
【参考方案3】：它只是一个标准的 jquery 选择器：attributeEquals
<html>
<head>
<title>Just a test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
$('#txtValue').change(function()
$('.selectMe').css('color', 'black');
$('.selectMe[value= '+$(this).val()+']').css('color', 'red');
);
);
</script>
</head>
<body>
<input type="text" id="txtValue" value=""/>
<div class="selectMe" value="1">one</div>
<div class="selectMe" value="2">two</div>
<div class="selectMe" value="3">three</div>
</body>
</html>
【讨论】：
以上是关于jQuery 高级选择器的主要内容，如果未能解决你的问题，请参考以下文章
HTML5中类jQuery选择器querySelector的高级使用
jQuery 高级选择器在 Internet Explorer 8 中失败