Question

我正在尝试根据以下规则验证devexpress网格上单击的单元格是否有效：

单击包含类的单元格：.dxgv.dx-ar（此部分正常工作）
如果该元素包含类gridValue的某个元素，并且此（子）元素的父元素名称为：＆＃39; allowsEdit＆＃39; （此代码不起作用）

我试图避免使用＆＃34; .parent（）...＆＃34; adicional line，但结合了多个JQuery选择器规则，但到目前为止我还没能。

有什么想法吗？

JS

$('#' + gridIdName).unbind('click').on('click', '.dxgv.dx-ar', function (e) {        
    if ($(this).find('.gridValue:parent[name="allowsEdit"]').length !== 0) {
        console.log('FOUND');
        return
    }
    console.log('NOT FOUND');
});

HTML

/******** VALID *************/
<td id="devGrid1_tccell2_13" class="dxgv dx-ar">
    <div style="width: 100%;" name="allowsEdit" class="contextMenuElement TargetIdstate VarietyId76 Year2018 CountryId2 PlanId11437">
        <div style="width:100%;" id="state_76_2_2018" class="gridValue gridValueMin1 gridValueMax11">
            2000
        </div>   
        <div style="clear: both;"></div>
    </div>
</td>
/******** NOT VALID *************/
<td id="devGrid1_tccell3_7" class="dxgv dx-ar" style="background-color:#E4AA8A;">
    <div style="width: 100%;" name="" class="contextMenuElement TargetIdactual VarietyId82 Year2018 CountryId1 PlanId12732">
        <div style="width:37px;" id="actual_82_1_2018" class="gridValue">
            40000
        </div>   
        <div style="clear: both;"></div>
    </div>
</td>

Answer 1

您可以为此

使用简单的css选择器

[name="allowsEdit"] > .gridValue

这将选择.gridValue元素。如果你想直接想要allowEditElement，你可以使用：

[name="allowsEdit"]:has(.gridValue)

查找直接父级有类的.gridValue类元素：.allowEdit

$(this).find('[name="allowsEdit"]:has(.gridValue)').length

有关详细信息，请参阅Mozzila's documentation有关此内容的信息

Answer 2

单击具有类的单元格：.dxgv.dx-ar

如果该元素包含gridValue类的某个元素，并且此元素的父名称为：＆＃39; allowsEdit＆＃39;

您的HTML与该说明不匹配，但以上是以下简单组合：

descendant combinator
A class selectors
一对:has selector
A {{3}}（这是一个jQuery添加）

所以这一切都是：[name=allowsEdit] .dxgv.dx-ar:has(.gridValue)

E.g：

$('#' + gridIdName).unbind('click').on('click', '[name=allowsEdit] .dxgv.dx-ar:has(.gridValue)', function (e) {

如果您不想要点击次数，除非匹配，否则

。

但是如果你想要点击不管，那么之后只想查看其他内容：

$('#' + gridIdName).unbind('click').on('click', '.dxgv.dx-ar', function (e) {
    var $this = $(this);
    if ($this.closest("[name=allowEdit]").length && $this.find(".gridValue").length) {
        // Match
    } else {
        // No match
    }

基于类和父名称的Jquery选择器

2 个答案: