什么是 selector for jquery find() 到 select 具有属性且没有父元素具有特定 class 的元素？

Question

这是我试过的方法

 $(".stemValueScope[data-stemValueId*="+stemValueId+"]").find("*:not(.stemValueScope) [required]").each(function() { ...}

但是由于我没有得到的原因，当我只想要不在 stemValueScope class

的元素中的必需元素时，所有 [required] 元素都被选中

（目的是仅当它们在已检查问题的范围内时才识别所需元素，但您真的不需要理解这只是说，因为 SO 说可能问题主要是代码...）

问题实际上只是关于 jquery 语法：我可以将 :not() 放在 find() 选择器中，否则如何对进入的所有 [required] 元素进行 each() 处理元素 ".stemValueScope[data-stemValueId*="+stemValueId+"]" 但不在 .stemValueScope class

的另一个元素中

请尝试使用小部件...

$(document).ready(function() { // au chargement de la page affiche / masque stemValueScope si $stemValue cochée / décochée
        $("input.stemValue:checked").each(function() {
            var stemValueId=$(this).attr("id");
            $(".stemValueScope[data-stemValueId="+stemValueId+"]").removeClass("hidden");
            $(".stemValueScope[data-stemValueId="+stemValueId+"]").show();
        });
        $("input.stemValue:not(:checked)").each(function() {
            var stemValueId=$(this).attr("id");
            //console.log(".stemValueScope[data-stemValueId="+stemValueId+"]");
            //console.log($(".stemValueScope[data-stemValueId="+stemValueId+"]").length);
            $(".stemValueScope[data-stemValueId="+stemValueId+"]").hide();
        });
    });

$("input:radio[name], input:checkbox[name]").click(function () { // affiche / masque stemValueScope si $stemValue cochée / décochée
        var name = $(this).attr("name");
            name = name.replace("[","\[").replace("]","\]");
        $("input.stemValue[name="+name+"]:not(:checked)").each(function() {
            var stemValueId=$(this).attr("id");
            $(".stemValueScope[data-stemValueId~="+stemValueId+"]").hide();
            $(".stemValueScope[data-stemValueId~="+stemValueId+"]").find("input").prop('checked', false); // vide stemValueScope si stemValue décochée
            $(".stemValueScope[data-stemValueId~="+stemValueId+"]").find("input:not([type=radio], [type=checkbox])").val(""); // vide stemValueScope si stemValue décochée
            $(".stemValueScope[data-stemValueId~="+stemValueId+"]").find("textarea").val(""); // vide stemValueScope si stemValue décochée
        });
        $("input.stemValue[name="+name+"]:checked").each(function() {
            var stemValueId=$(this).attr("id");
            //console.log(".stemValueScope[data-stemValueId*="+stemValueId+"]");
            //console.log($(".stemValueScope[data-stemValueId*="+stemValueId+"]").length);
            $(".stemValueScope[data-stemValueId~="+stemValueId+"]").removeClass("hidden");
            $(".stemValueScope[data-stemValueId~="+stemValueId+"]").show();
        });
    });
    
    
     $(".record").click(function() {
     var formId = $(this).closest("form").attr('id');
     var isValid=true;
        
       $("#" + formId +" input.stemValue:checked").each(function() { // pour toutes les stemValue cochées vérifie que les champs required sont saisis
            var stemValueId=$(this).attr("id");
            // vérifie que dans le stemValueScope tous les inputs avec un attribut required sont bien renseignés
            $(".stemValueScope[data-stemValueId*="+stemValueId+"]").find("*:not(.stemValueScope) [required]").each(function() {
                var name =$(this).attr("name");
                if ($(this).attr('type') == "radio") {
                    var value = $("[name="+name+"]:checked").val();
                } else {
                    var value = $(this).val();
                }
                console.log("required in stemValueScope de "+stemValueId+" : "+name+" = "+value);
                if ( (!$(this).hasClass(".jq-allowZero") && value == "0" ) || value == "" || value === undefined || value == "\N" ) {
                    isValid = false;
                    console.log(isValid);
                    alert('Merci de renseigner '+name);
                }
            });
     });
     if (isValid)  alert('form ok');
     })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <form id="test" method="post">
 <p>Le dossier concerne une tumeur à enregistrer

                    <label class="radio-inline margin-left margin-right-10">
                        <input class="stemValue" required="" name="tumeur" id="tumeurOui" value="oui" type="radio">
                        <span>Oui</span>
                    </label>

                    <label class="radio-inline margin-right-10">
                        <input class="stemValue" name="tumeur" id="tumeurNon" value="non" type="radio">
                        <span>Non</span>
                    </label>

                    </p>
<div data-stemValueId="tumeurOui" class="stemValueScope">           
<div class="row margin-top">

                            <div class="margin-left-10 margin-top-10" style="position: relative">
                                <span class="text-bold margin-left">Classification</span>
                                <label class="radio-inline">
                                    <input required="" name="classification" value="OMS" type="radio">
                                    <span>OMS</span>
                                </label>
                                <label class="radio-inline">
                                    <input name="classification" value="SBR" type="radio">
                                    <span>SBR</span>
                                </label>
                                <label class="radio-inline">
                                    <input name="classification" value="Fuhrman" type="radio">
                                    <span>Fuhrman</span>
                                </label>
                                <label class="radio-inline">
                                    <input id="classificationAutre" class="stemValue" name="classification" value="autre" type="radio">
                                    <span>autre</span>
                                </label>
                                <span style="position: absolute; display: none;" class="stemValueScope margin-left-20" data-stemvalueid="classificationAutre">préciser
                                    <label class="radio-inline">
                                        <input required="" name="classificationPreciser" value="" type="text">
                                    </label>
                                </span>
                            </div>
                        </div>
                        
                        <div style="margin-top:20px"><span class="record" style="background-color:lightgrey;padding:5px;">check</span></div>
                        </div>
                        
                        <div data-stemValueId="tumeurNon" class="stemValueScope">
                        when no is clicked
                        </div>
                        </form>

Answer 1

what is the selector for jquery find() to select an element with attribute AND no parent with specific class?

您首先需要 select 每个具有 $('[yourAttribute]') 属性的元素。

然后你需要 filter 出那些 parent 和某个 class。您可以通过查看是否 $(this).closest('.parentClass').length returns 0 来轻松测试。

var result = $('[data-test]').filter(function(){
  return $(this).closest('.test').length;
});

console.log(result.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <p data-test="whatever"><p>
</div>
<div>
  <p data-test="whatever"><p>
</div>

Answer 2

这是我需要的：

`$("#" + formId +" input.stemValue:checked").each(function() { 

        var stemValueId=$(this).attr("id");

        $(".stemValueScope[data-stemValueId*="+stemValueId+"]").find("[required]").each(function() {

            if($(this).closest('.stemValueScope').attr("data-stemValueId")==stemValueId) {
                var name =$(this).attr("name");
                //name = name.replace("[","\[").replace("]","\]");
                if ($(this).attr('type') == "radio") {
                    var value = $("[name="+name+"]:checked").val();
                } else {
                    var value = $(this).val();
                }
                if (<?= $cfg['debug']."0" ?>) { console.log("required in stemValueScope de "+stemValueId+" : "+name+" = "+value);}
                if ( (!$(this).hasClass(".jq-allowZero") && value == "0" ) || value == "" || value === undefined || value == "\N" ) {
                    isValid = false;
                    console.log(isValid);
                    $(this).notify('Merci de renseigner', { className: "error",position: "top middle" });
                }
            }
        });

               });

必须添加一项测试以查看带有 stemValueScope 的 closest() 项目是否是正在检查 [required] 项目的项目，而不是嵌套的必需项目...

if($(this).closest('.stemValueScope').attr("data-stemValueId")==stemValueId)

什么是 selector for jquery find() 到 select 具有属性且没有父元素具有特定 class 的元素？

what is the selector for jquery find() to select an element with attribute AND no parent with specific class?

jquery

jquery-selectors