JQuery选择:两个属性's值不相等

JQuery select for: two attribute's value not equaling each other

本文关键字:不相等 属性 两个 选择 JQuery      更新时间:2024-04-26

我正在尝试为具有两个不同值的特定属性的元素执行JQuery选择函数。

(原因是我可以选择已更改的输入。)

然而,我似乎找不到任何显示这种场景的文档。

这里有一个测试来隐藏以这种方式选择的元素,但正如我所说,我找不到正确的语法来使其工作。

我试过:

"[value]!=[oldvalue]" 
"[value!=[oldvalue]]" 
"[value!=oldvalue]" 

还有其他一些疯狂的事情都失败了。

有什么建议吗?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("[value<>[oldvalue]]").hide();
    });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is another paragraph.</p>
<p value="2" oldvalue="1">This is a paragraph to go away.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

您需要为此使用过滤器,因为逻辑对于单个选择器来说太复杂了。试试这个:

$("button").click(function() {
    $('[value][oldvalue]').filter(function() {
        return $(this).attr('value') != $(this).attr('oldvalue');
    }).hide();
});

您可以针对所有共享这两个属性的元素,然后使用jQuery filter()函数查找不匹配的元素:

$("button").click(function(){
  // Find all elements that have both attributes
  $('[value][oldvalue]').filter(function(){ 
       // Filter those that do not match
       return $(this).attr('value') !== $(this).attr('oldvalue');
  }).hide();
});

你可以在这里看到一个例子。

忽略示例中的无效HTML,您可以通过使用jQuery的filter:来实现这一点

$('[value][oldvalue]').filter(function() {
    var $el = $(this);
    return $el.attr('value') !== $el.attr('oldvalue');
});

var results = $('[value][oldvalue]').filter(function() {
  var $el = $(this);
  return $el.attr('value') !== $el.attr('oldvalue');
});
$('[value][oldvalue]').hide();
$(results).show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p value="1" oldvalue="2">Show me!</p>
<p value="1" oldvalue="1">Do not show me!</p>

我想我和很多其他人是在同一时间发布的,但我在这里有一个有效的片段。

选择所有具有所需属性的元素,并使用filter()将集合缩减为具有不等值的元素,如:

$(document).ready(function() {
  $("button").click(function() {
    var els = $("[value][oldvalue]").filter(function(i) {
      return $(this).attr('value') != $(this).attr('oldvalue');
    }).hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p value="2" oldvalue="1">This is a paragraph to go away.</p>
<p value="2" oldvalue="2">This is a paragraph to <b>not</b> go away.</p>
<button>Click me</button>