Menu
I want to get an img by its css property, on jQuery. the property is margin-left:-1920px.
How can I do that?
I tried $('img').css('margin-left', '-1920px');
console.log('img');
but of course its changing the property and this I don't want. I want to get the element first and then changing the property.
How can I get the element?
my jQuery code:
$(document).ready(function() {
var sliderUL = $('.slider').children('ul'),
imgs = sliderUL.find('img'),
imgWidth = imgs[0].width, // 960
imgsLen = imgs.length, // 4
current = 1,
totalImgsWidth = imgsLen * imgWidth;
$('#slider-nav')
.show().find('button').on('click', function() {
direction = $(this).data('dir');
var loc = imgWidth;
(direction === 'next') ? ++current : --current;
if (current === 0) {
current = imgsLen;
direction = 'next';
loc = totalImgsWidth - imgWidth;
} else if ( current - 1 === imgsLen ) {
current = 1;
loc = 0;
}
transition(sliderUL, loc, direction);
});
function transition( container, loc, direction ) {
var unit;
if ( direction && loc !== 0 ) {
unit = ( direction === 'next' ) ? '-=' : '+=';
}
container.animate({
'margin-left': unit ? (unit+loc) : loc
})
}
});
my HTML:
<body>
<div id="slider-nav">
<button data-dir="prev"><</button>
<button data-dir="next">></button>
</div>
<div class="slider">
<ul>
<li><img src="img1.jpg" alt="image"></li>
<li><img src="img2.jpg" alt="image"></li>
<li><img src="img3.jpg" alt="image"></li>
<li><img src="img4.jpg" alt="image"></li>
</ul>
</div>
319
You can filter those images with that style using filter():
var img = $('img').filter(function() {
return $(this).css('margin-left') == '-1920px';
});
You can use:
var x = $('img').filter(function () {
return this.style.marginLeft == '-1920px'
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
