Question

所以问题就像：我正在使用json和最终的html生成一个html块，如下所示：

<section class="imagesec" img-width="400">
    <button>click me</button>
    <img src="xyx.jpg"> <!-- image actual width = 400px -->
    <hr>
</section>
<section class="imagesec" img-width="300">
    <button>click me</button>
    <img src="abc.jpg"> <!-- image actual width = 300px -->
    <hr>
</section>

and so it goes on ....
...
...

所以我在“section”标签中设置“img-width”属性来指定其中的图像宽度。

我想做什么？我只想用class = imagesec隐藏所有部分，这可以像这样完成

$("section.imagesec").hide()

然后显示包含宽度高于350像素的图像的所有部分。所以这样做的一种方法就是让所有的section元素循环遍历每个元素并获取属性“img-width”的值并将其与350进行比较，如果它超过那个显示当前的html对象，否则隐藏它。

但我想要的是这样的东西可以在jquery ???

$("section.imagesec").hide()
$("section.imagesec").having(attr(img-width) > 350).show()

简而言之：我只想隐藏包含图像的所有部分宽度小于350px。

编辑：img-width =“400”不是img-width =“400px”

Answer 1

尝试使用.filter()及其call back来完成您的任务，

$('section.imagesec[img-width]').filter(function(){
  return (parseInt($(this).attr('img-width'),10) < 350);
}).hide();

DEMO

Answer 2

您可以使用filter()

$("section.imagesec").hide().filter(function(){
   return parseInt($(this).attr('img-width'),10) > 350 ;
}).show();

Answer 3

修复你的html5语法并做得更恰当。您应该使用html元素上的data-来＆＃34;存储＆＃34;值。下面是新的html和其他答案的jQuery（我不相信）。

DEMO

<section class="imagesec" data-img-width="400">
    <button>click me</button>
    <img src="xyx.jpg"> <!-- image actual width = 400px -->
    <hr>
</section>


$('section.imagesec[data-img-width]').filter(function(){
  return (parseInt($(this).attr('data-img-width'),10) < 350);
}).show();

对元素属性的jquery操作

3 个答案:

DEMO