简体   繁体   中英

How can I target a specific dom css class that has a specific inline style without using indexOf method

The answer that worked for me initially is here.
How can I select an element with a specific inline style?

$('div').filter(function() {
return $(this).attr('style') == undefined || $(this).attr('style').indexOf('display: none;') == -1
}).

However, it being Jquery 2+ and all I was wondering if there was a better method for acheiving the same result. What I wish could change about the above method is that it requires using the indexOf JS method to obtain a value of -1 or 0 for a truthy falesy type return.

I have tried this: but it defaults to select the first style it fines. and I haven't figured a way to "filter" the results to a specific class.

$("[style='display: block;']").css("color", "yellow");

I figured it out with JSBIN. YEA... I will share my answer...

I used the filter function like above but did an attribute equals selector value with the .is method. Here is more info on jquery attribute equals selector. https://api.jquery.com/attribute-equals-selector/

Here is the final code and Jsbin with the two methods. let me know what you think. The filter function looks for if in "this" document with a class of .bottom-drawer there .is a style with a value of "display: block". I used the style* to give it a fuzzy like approach of anything with display: block or block;.
http://jsbin.com/coroxa/1/edit?html,js,output

$('.bottom-drawer').filter(function() {
    return $(this).is("[style*='display: block']") === true;
}).slideToggle(620);

This is the answer I came up with and the associated bin.

What this project accomplished was doing a div drawer effect that hides once another drawer is open - the other one closes.

This wasn't to say the method of using indexOf wasn't a good option but just didn't seem intutive to me for the purposes of selecting a particular class or id's inline style. hope this helps someone.

http://jsbin.com/coroxa/1/edit?html,js,output

$('.top.expand-accordian a').click(function(e){
    e.preventDefault();
    $(this).find('i').toggleClass('rotate');
    $('.maui-drawer').slideToggle(620);
    $('.bottom-drawer').filter(function() {
      //return $(this).attr('style').indexOf('display: block;') === 0;
    return $(this).is("[style*='display: block']") === true;
    }).slideToggle(620);
});

$('.bottom.expand-accordian a').click(function(e){
    e.preventDefault();
    $(this).find('i').toggleClass('rotate');
    $('.bottom-drawer').slideToggle(620);
    $('.maui-drawer').filter(function() {
    //;return $(this).attr('style').indexOf('display: block;') === 0;
    return $(this).is("[style*='display: block']") === true;
    }).slideToggle(620);
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM