Javascript не понимаю как проверить если в списке есть такие же элементы

184

04 сентября 2018, 06:50

Всем добрый день! у меня есть список в который я вношу города вместе со странами, мне нужно добавить условие: что элемент который есть в списке, добавить снова уже нельзя.

вот мой html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test German Varanytsya</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<form id="zip">
<div id="myDiv" class="header">
<h2 style="margin:5px">Test</h2>
<input type="text" id="myInput" placeholder="Plase type city and 
state">
<button type="submit" onclick="newElement(event)"
class="addBtn">Add</button>
</div>
</form>
<ul id="myUl">
<li>Moscov,Russia</li>
<li>Odessa,Ukraine</li>
<li>New York,USA</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>

а вот то что у меня есть в JavaScript:

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// close item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Create a new item
function newElement(event) {
event.preventDefault()
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUl").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}

Помогите пожалуйста добавить эту валидацию... проверить есть ли в списке подобный элемент, если ДА то добавить его нельзя

Answer 1

Во-первых, можно перебрать все элементы списка в цикле и проверить:

var searchElements = document.getElementById('myUl').getElementsByTagName('li');
for (var i=0; i < searchElements.length; i++) {
    if (searchElements[i].textContent.slice(0, -1) == inputValue) {
        alert ('Такой элемент уже есть в списке');
        return;
    }
}

Во-вторых, можно поступить более изящно, записывать все вводимые значения в массив и проверять, есть ли уже такое значение встроенным в него методом indexOf.

// необходимо заранее объявить переменную elements = []
if (elements.indexOf(inputValue) != -1) {
    alert ('Такой элемент уже есть в списке');
    return;
}
elements.push(inputValue);

Ну и в-третьих, для этих целей можно использовать функции библиотек, типа lodash или jQuery.

Answer 2

ну во первых вы можете использовать штатную функцию из jqery

jQuery.inArray()

и проверить есть ли такое значение в массиве. или использовать нативное решение

var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);// проверит есть ли такой элемент в массиве и если  нет вернет '-1'
while (idx != -1) {
 // тут действия если в массиве нет такого элемента
}

извиняюсь что код не чистый просто указываю направление

Answer 3

// Create a "close" button and append it to each list item 
var myNodelist = document.getElementsByTagName("LI"); 
var i; 
for (i = 0; i < myNodelist.length; i++) { 
var span = document.createElement("SPAN"); 
var txt = document.createTextNode("\u00D7"); 
span.className = "close"; 
span.appendChild(txt); 
myNodelist[i].appendChild(span); 
} 
 
// close item 
var close = document.getElementsByClassName("close"); 
var i; 
for (i = 0; i < close.length; i++) { 
close[i].onclick = function() { 
var div = this.parentElement; 
div.style.display = "none"; 
} 
} 
 
// Create a new item 
function newElement(event) { 
event.preventDefault() 
var li = document.createElement("li"); 
var inputValue = document.getElementById("myInput").value; 
var t = document.createTextNode(inputValue); 
li.appendChild(t); 
var x ; 
 
	/***Add loop**/ 
	for  (let i = 0; i < myNodelist.length;i += 1){ 
		let word = myNodelist[i].innerHTML; 
		if (word.search(inputValue) > -1){ 
			x = true; 
			break; 
		} 
	} 
if (inputValue === '') { 
alert("You must write something!"); 
}else if(x === true){ 
	alert('This name we have'); 
} 
else { 
document.getElementById("myUl").appendChild(li); 
} 
document.getElementById("myInput").value = ""; 
 
var span = document.createElement("SPAN"); 
var txt = document.createTextNode("\u00D7"); 
span.className = "close"; 
span.appendChild(txt); 
li.appendChild(span); 
 
for (i = 0; i < close.length; i++) { 
close[i].onclick = function() { 
var div = this.parentElement; 
div.style.display = "none"; 
} 
} 
}

Answer 4

Например с помощью библиотеки lodash

Найти индекс элемента в массиве https://lodash.com/docs/4.17.10#findIndex

или

Оставить в массиве только уникальные значения https://lodash.com/docs/4.17.10#uniq

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

PDO: не получается создать 2 обьекта

Ребят, при попытке создать два объекта PDO Fatal error: Uncaught PDOException: SQLSTATE[HY000] [2019] Unknown character set in /var/www/test3/components/MySQLphp:19 Stack trace: #0 /var/www/test3/components/MySQL

169

MySQL

Сложная выборка данных SQL (MySQL)

Нужно выбрать все данные для таблицы постройкиОсобенно интересует в какой области она находится

175

HTML

Схлопывание margin у родителя и потомка

Прочитал то что для "отключения" схлопывания у родителя и потомка можно задать свойство display: inline-block; для одного элемента участвующего в схлопыванииВопрос:...

193

HTML

Не отображаются полосы прогресса

Не могу понять, где ошибка в коде, почему не отображается полоса прогресса?

194