что представляет собой селектор для jquery find() для выбора элемента с атрибутом И без родителя с определенным классом?

61
3

Вот что я пробовал

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

но по какой-то причине я не получаю, весь элемент [required] выбирается, когда мне нужен только требуемый элемент, который НЕ находится в элементе с классом stemValueScope

(цель состоит в том, чтобы идентифицировать требуемый элемент только в том случае, если они находятся в области проверенного вопроса, но вам действительно не нужно понимать это, просто говоря, потому что SO говорит, что вопрос может касаться в основном кода...)

вопрос действительно только о синтаксисе jquery: могу ли я поставить: not() в селектор find(), или как иметь каждое() лечение на всех [обязательных] элементах, которые находятся в элементе ".stemValueScope[data-stemValueId*="+stemValueId+"]" но не внутри другого элемента с классом .stemValueScope

попробуйте его с помощью виджета...

$(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>

спросил(а) 2018-03-08T15:44:00+03:00 1 год, 9 месяцев назад
2
Решение
75

вот что мне нужно:

'$("#" + 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" });
}
}
});

});

должен был добавить тест, чтобы узнать, является ли closest() элемент с stemValueScope тем, для которого [required] элемент проверяется, а не вложенным требуемым элементом...

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

ответил(а) 2018-03-08T17:15:00+03:00 1 год, 9 месяцев назад
Еще 1 ответ
33

что представляет собой селектор для jquery find() для выбора элемента с атрибутом И без родителя с определенным классом?

Сначала вам нужно выбрать каждый элемент с атрибутом с $('[yourAttribute]').

Затем вам нужно filter те, у которых есть родительский элемент с определенным классом. Вы можете легко проверить это, посмотрев if $(this).closest('.parentClass').length возвращает 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>

ответил(а) 2018-03-08T15:52:00+03:00 1 год, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема