ExtJs 6.0 - Ext.dom.Element.query() - 属性中的多个值 - 正确的选择器

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 标记，该标记在其 foo 属性中包含值 4。

然而queried_imgs 是空的。

---

什么是正确的 CSS 选择器来检索 img 标签在其 foo 属性中包含 4？

Answer 1

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

img 标记的 CSS 选择器，该标记具有 foo 属性，其值包含 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 -->

注意：我相信您只是在寻找上述选择器。

---

img 标签的 CSS 选择器，它有一个 foo 属性，其值以 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 -->

img 标记的 CSS 选择器，它有一个 foo 属性，其值正好是 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 -->

---

img 标签的 CSS 选择器，它有一个 foo 属性，它有一个空格分隔值列表，其中一个值正好是 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 -->

注意：~= 选择器将在您的代码中选择元素 #1 和 #3。但它并不完全选择 foo 属性 包含 4.

的元素