All geek questions in one place

How to get img by css jQuery property

I want to get img with my css property, in jQuery. margin-left property: -1920px.

How can i do this?

I tried $('img').css('margin-left', '-1920px'); console.log('img'); but, of course, this is a property change, and I don't want that. I want to get the element first and then change the property. How can i get the item?

my jQuery code is:

$(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>

+4
source share
2 answers

You can filter these images using this style using a filter () : 

var img = $('img').filter(function() {
    return $(this).css('margin-left') == '-1920px';
});
+6
source

You can use:

 var x = $('img').filter(function () { 
   return this.style.marginLeft == '-1920px' 
});
+2
source

Source: https://habr.com/ru/post/1527672/

More articles:


All Articles