javascript - 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) 方法来查询包含值 4 的 img 标签> 在它们的 foo 属性中。

然而 queried_imgs 是空的。

---

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

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 的元素。