Question

我的Sencha fiddle看起来像这样：

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);
  }
});

我的问题是：
在第15行中，我尝试使用Ext.dom.Element.query(selector) - 方法在img属性中查询包含值4的{{1}}代码。

然而foo是空的。

在queried_imgs属性中检索包含img的{{1}}代码的正确CSS选择器是什么？

Answer 1

以下是各种属性选择器，它们根据属性和值选择元素。您可以使用最适合您的情况。您可以在W3C Selectors Spec中找到有关各种可用CSS属性选择器的更多详细信息。

img代码的CSS选择器，其foo属性的值包含4 - img[foo*='4']

＆＃13;

img[foo*='4']{
  border: 5px solid red;
}

＆＃13;

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

＆＃13;

注意：我相信您只关注上述选择器。

img代码的CSS选择器，其foo属性的值以4开头 - img[foo^='4']

＆＃13;

img[foo^='4']{
  border: 5px solid red;
}

＆＃13;

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

＆＃13;

img代码的CSS选择器，其foo属性的值恰好为4 - img[foo='4']

＆＃13;

img[foo='4']{
  border: 5px solid red;
}

＆＃13;

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

＆＃13;

img标记的CSS选择器，其foo属性具有空格分隔值列表，其中一个正好为4 - img[foo~='4']

＆＃13;

img[foo~='4']{
  border: 5px solid red;
}

＆＃13;

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

＆＃13;

注意： ~=选择器会在您的代码中选择元素#1和#3。但是并没有完全选择其foo属性包含 4的元素。

ExtJs 6.0 - Ext.dom.Element.query（） - 属性中的多个值 - 更正选择器

1 个答案: