CODEWITHSUNDEEP
javascripthtmlcssextjscss-selectors
kiltek
kiltek

Reputation: 3211

ExtJs 6.0 - Ext.dom.Element.query() - multiple values in attribute - correct selector

My Sencha fiddle looks like this: 

Ext.application({
name : 'Fiddle',

launch : function() {
   var my_panel = Ext.create('Ext.panel.Panel', {
        html: "<img id='1' foo='4 6 8' src='http://i342.photobucket.com/albums/o416/TaySensei/avatar_me_in_anime_1_by_maria345.jpg'/>" + 
              "<img id='2' foo='5 7 9 10' src='http://i621.photobucket.com/albums/tt296/Kruh11/KruhPic50x50LQ.jpg'/>" +
              "<img id='3' foo='6 4' src='http://i744.photobucket.com/albums/xx84/no_photos_here/communitytile-1.jpg'/>"
    });
    var my_viewport =  Ext.create("Ext.container.Viewport",{
        layout: 'fit',
        items: [my_panel],
        renderTo : Ext.getBody()
    });
    var queried_imgs = my_panel.body.query("img[foo='4']");


    Ext.toast('queried_imgs = ' + queried_imgs);
  }
});

My question is:
In line 15 I am trying to use the Ext.dom.Element.query(selector)-method to query for img tags containing the value 4 in their foo attribute.

Yet queried_imgs is empty.

What is the correct CSS-selector to retrieve the img tags containing 4 in their foo attribute?

Upvotes: 1

Views: 572

Answers (1)

Harry
Harry

Reputation: 89780

The following are the various attribute selectors which select an element based on their attribute and value. You can use whichever suits your case the best. You can find more details about the various available CSS attribute selectors in the W3C Selectors Spec.

CSS Selector for img tag which has a foo attribute whose value contains 4 - img[foo*='4']

img[foo*='4']{
  border: 5px solid red;
}
<img src='http://lorempixel.com/100/100/nature/4' foo='4 5' /> <!-- will select this -->
<img src='http://lorempixel.com/100/100/nature/4' foo='41' />  <!-- and this -->
<img src='http://lorempixel.com/100/100/nature/4' foo='14' />  <!-- and this -->
<img src='http://lorempixel.com/100/100/nature/4' foo='4' />   <!-- and this -->

Note: I believe that you are looking only for the above selector.

CSS Selector for img tag which has a foo attribute whose value starts with 4 - img[foo^='4']

img[foo^='4']{
  border: 5px solid red;
}
<img src='http://lorempixel.com/100/100/nature/4' foo='4 5' /> <!-- will select only this -->
<img src='http://lorempixel.com/100/100/nature/4' foo='41' />  <!-- and this -->
<img src='http://lorempixel.com/100/100/nature/4' foo='14' />
<img src='http://lorempixel.com/100/100/nature/4' foo='4' />   <!-- and this -->

CSS selector for img tag which has a foo attribute whose value is exactly 4 - img[foo='4']

img[foo='4']{
  border: 5px solid red;
}
<img src='http://lorempixel.com/100/100/nature/4' foo='4 5' />
<img src='http://lorempixel.com/100/100/nature/4' foo='41' />
<img src='http://lorempixel.com/100/100/nature/4' foo='14' />
<img src='http://lorempixel.com/100/100/nature/4' foo='4' />   <!-- will select only this -->

CSS selector for img tag which has a foo attribute which has a list of space separated values one among which is exactly 4 - img[foo~='4']

img[foo~='4']{
  border: 5px solid red;
}
<img src='http://lorempixel.com/100/100/nature/4' foo='4 5' />   <!-- this will select this -->
<img src='http://lorempixel.com/100/100/nature/4' foo='41 21' />
<img src='http://lorempixel.com/100/100/nature/4' foo='14 34' />
<img src='http://lorempixel.com/100/100/nature/4' foo='4' />     <!-- and this -->
<img src='http://lorempixel.com/100/100/nature/4' foo='159 4' /> <!-- and this -->

Note: The ~= selector would select elements #1 and #3 in your code. But it is not exactly select an element whose foo attribute contains 4.

Upvotes: 1

Related Questions