jquery manipulation on element attributes

Question

so the problem is like : I am generating a html block with json and final html look like this :

<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 ....
...
...

So i am setting "img-width" attribute in "section" tag for specifying the width of image in it .

What i Want to do ? I just want to hide all section with class = imagesec , which can be done like this

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

And then display all sections which contains images of width higher than 350 px . so one way to do this is like getting all section elements then loop over each of them and get value of attribute "img-width" and compare it with 350 , if its more than that display current html object otherwise hide it .

But i want is something like this is possible in jquery ???

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

IN SHORT : I just want to hide all sections which contain images with width less than 350px .

EDIT : img-width="400" not img-width="400px"

http://stackoverflow.com/questions/2613648/jquery-selecting-all-elements-where-attribute-is-greater-than-a-value — Jan Pfeifer, Jul 15 '14 at 13:01
You should probably use other property then img-width for section. — Dejan.S, Jul 15 '14 at 13:01
@Dejan.S can you show me the solution if i have used prop or property ? — Varun Verma, Jul 15 '14 at 13:09
@VarunVerma posted an answers below to show you more correct html5 syntax. — Dejan.S, Jul 15 '14 at 13:26

score 5 · Answer 1 · answered Jul 15 '14 at 12:59

5

Try to use .filter() with its call back to accomplish your task,

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

DEMO

answered Jul 15 '14 at 12:59

Rajaprabhu Aravindasamy

66,513
17
101
130

Except that the value at `img-width` is something like `###px` – ಠ_ಠ Jul 15 '14 at 13:00
@ಠ_ಠ i didn't see that.. Thanks.. :) – Rajaprabhu Aravindasamy Jul 15 '14 at 13:01
2

@ಠ_ಠ doesn't matter - `parseInt()` ignores non-digits at the end of strings – Pointy Jul 15 '14 at 13:02
@Pointy the parseInt call wasn't there when my comment was made ;) – ಠ_ಠ Jul 15 '14 at 13:03
1

wow @RajaprabhuAravindasamy that was some really quick editing :) – Pointy Jul 15 '14 at 13:04
@Pointy Nope, he pointed that mistake really fast.. credit should go to him.. :) – Rajaprabhu Aravindasamy Jul 15 '14 at 13:05
edited the problem , img-width="400" means i can create anything i want here , its not img-width="400px" – Varun Verma Jul 15 '14 at 13:08

score 1 · Accepted Answer · answered Jul 15 '14 at 13:01

1

You can use filter()

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

answered Jul 15 '14 at 13:01

charlietfl

170,828
13
121
150

score 1 · Answer 3 · answered Jul 15 '14 at 13:26

To fix your html5 syntax and do it more proper. You should use the data- on html elements to "store" values. This below is the new html and the jQuery from other answers (I take no credit for that).

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 manipulation on element attributes

3 Answers3

DEMO