Помощь .filter [Архив форума]

Просмотр полной версии : Помощь .filter

orange8031

09.09.2019, 16:11

Добрый день! Ребята, подскажите пожалуйста как правильно запихнуть в .filter opt

$('.btn').on('click', function () {
$( "#select option" ).each(function( index ) {
var opt = ':not([data-value=' + $( this ).val() + ']),';
$('#select-ul').next().children('ul').children('li').filter(o pt).hide();
});
});

SuperZen

09.09.2019, 16:25

Type: Function( Integer index, Element element ) => Boolean
A function used as a test for each element in the set. this is the current DOM element.

function opt(index, element) {
return ':not([data-value=' + $( this ).val() + ']),'
}

может быть так, надо проверять.

orange8031

09.09.2019, 16:33

Не работает, прячет все.

SuperZen

09.09.2019, 16:43

<html>

<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
console.log("document loaded");
$('.select').children('option').filter(`:not([data-value="hide"])`).hide() // missing "" ?
})
</script>
</head>

<body>
<select class="select">
<option data-value="hide">hide</option>
<option data-value="show">show</option>
</select>
</body>

</html>

кто такой $(this).val() ?

orange8031

09.09.2019, 16:55

нужно в цикле пройти по всем option в select взять их value там есть white, black и тд. есть список который копирует эти опции и добавляет li data-value=white, black и тд. Мне нужно проверить после клика что осталось в этом select и спрятать все li кроме data-value которые совпадают с option value

Malleys

09.09.2019, 16:55

orange8031

09.09.2019, 17:04

<div class="value">
<select id="#select"style="display: none;">
<option value="">Выбрать опцию</option>
<option value="white">Белый</option>
<option value="black">Черный</option>
</select>
<div id="select-ul">
<span class="current">Выбрать опцию</span>
<ul class="list">
<li data-value="" class="option selected">Выбрать опцию</li>
<li data-value="white" class="option">Белый</li>
<li data-value="black" class="option">Черный</li>
</ul>
</div>
</div>

laimas

09.09.2019, 17:23

Это действие $( "#select option" ).each(function( index ) было бы справедливо, если бы список был со множественным выбором, а вашем случае это просто $( "#select" ).val().

Дальше нужно просто взять li и отфильтровать, при этом и для этого цикла не нужно.

Malleys

09.09.2019, 17:23

Я так понимаю, что вы хотите выбрать из вашего UL-списка пункт, чтобы остальные, кроме выбранного, скрылись, и выбранное значение записалось в SELECT-список.

<div class="value">
<select id="#select" style="display: none;">
<option value="">Выбрать опцию</option>
<option value="white">Белый</option>
<option value="black">Черный</option>
</select>
<div>
<span class="current">Выбрать опцию</span>
<ul class="list">
<li data-value="" class="option selected">Выбрать опцию</li>
<li data-value="white" class="option">Белый</li>
<li data-value="black" class="option">Черный</li>
</ul>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$("li[data-value]").on("click", function() {
$("li:not([data-value=" + $(this).data("value") + "])", this.parentNode).hide();
$("select", $(this).closest(".value")).val($(this).data("value"));
});

</script>

orange8031, а вообще зачем вам SELECT, если он всё равно скрыт? Для формы достаточно input[type=hidden]
<div class="value">
<input type="hidden">
<div>
<span class="current">Выбрать опцию</span>
<ul class="list">
<li data-value="" class="option selected">Выбрать опцию</li>
<li data-value="white" class="option">Белый</li>
<li data-value="black" class="option">Черный</li>
</ul>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$("li[data-value]").on("click", function() {
$("li:not([data-value=" + $(this).data("value") + "])", this.parentNode).hide();
$("input[type=hidden]", $(this).closest(".value")).val($(this).data("value"));
});

</script>

orange8031, не пиши <select id="#select" style="display: none;">, пиши <input type="hidden">

рони

09.09.2019, 17:29

Malleys,
$("li:not([data-value=" + $(this).data("value") + "])", this.parentNode).hide();
как вариант
$(this).siblings().hide();

Malleys

09.09.2019, 17:33

$(this).closest().hide();
рони, так приведите пример, как такое может быть равнозначно моей строке

рони

09.09.2019, 17:35

Malleys,
исправил!!!
$(this).siblings().hide();

orange8031

09.09.2019, 17:41

Нет, есть кнопка она динамически меняет select(не опцию а весь селект), но у списка остаются те-же значения. Мне нужно что-бы при клике на эту кнопку в списке также остались только те значения. Там нужен этот список для стилизации. Это opt возможно запихнуть в .not или еще как-то?

orange8031

09.09.2019, 17:44

как сюда правильно передать opt$('#select-ul').next().children('ul').children('li').filter(o pt).hide();

Malleys

09.09.2019, 17:46

orange8031, это очень плохо, что вы делаете, поскольку дублируются данные. Если вы хотите делать список при помощи элемента UL, то делайте только его. В чём смысл скрытого элемента? как сюда правильно передать opt Не нужно туда ничего передавать, делайте только один список, второй всё равно не виден. И зачем он, когда у вас уже всё есть в UL.

как сюда правильно передать opt Вам уже показали как скрыть другие элементы.

UPD Зачем вам экземпляр класса HTMLSelectElement, когда вы можете написать свой собственный класс, в котором будет описана логика работы вашего списка. (Например, за основу можете взять этот пример https://javascript.ru/forum/showthread.php?p=512626#post511222)