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

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

本文关键字：选择器 属性 Element dom query ExtJs 0-Ext      更新时间：2023-09-26

我的Sencha小提琴看起来像这样：

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是空的。

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

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

img标签的CSS选择器，该标签具有值包含4-img[foo*='4'] 的foo属性

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选择器，该标记具有值以4-开头的foo属性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选择器，该标签具有值正好为4-img[foo='4']的foo属性

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

相关文章：