Javascript 从UL列表中获取标题Atibute，并检查标题是否已存在_Javascript_Jquery

Javascript 从UL列表中获取标题Atibute，并检查标题是否已存在

javascript jquery

Javascript 从UL列表中获取标题Atibute，并检查标题是否已存在,javascript,jquery,Javascript,Jquery,我有一个UL： <ul> <li class="list-group-item" title="Test1">Test1</li> <li class="list-group-item" title="Test2">Test2</li> <li class="list-group-item" title="Test3">Test3</li> </ul> Test1 Test

我有一个UL：

<ul>
    <li class="list-group-item" title="Test1">Test1</li>
    <li class="list-group-item" title="Test2">Test2</li>
    <li class="list-group-item" title="Test3">Test3</li>
</ul>


Test1
Test2
Test3

我有一个新的

字符串要插入，但我需要检查这个新标题是否已经存在，以防止重复

如何使用JavaScript或jQuery执行此操作？

您可以按如下方式执行。检查演示-

var newTitle='Test1'；
如果（$（'[title=“'+newTitle+'“]'）。长度===0）{
$（'ul'）。追加（'“+newTitle+””）；
}

这是一种方法，没有更多的代码或上下文，它不是很具体，但应该很容易适应您的情况

var titles=['i1'，'i2'，'i4']；
$（'ul li'）。每个（函数（）{
var tmpTitle=$（this.attr（'title'）；
if（标题索引（tmpTitle）>-1）{
//已经存在
}否则{
//不存在
}
})



第1项
第2项
第3项
第4项

你可以试试这样的东西

<button id="my-button">Add New Title</button>

接下来，我们需要存储对按钮的引用，以创建新的列表项，以及我们自己的列表

var button = document.getElementById("my-button");
var list = document.getElementById("my-list");

我们将侦听click事件并提示用户输入。之后，我们将使用

indexOf

属性查看标题是否已经存在。如果没有，我们可以创建一个新元素并将其附加到列表中。如果不是，我们将简单地返回false

button.addEventListener("click", function() {
    var title = prompt("Enter a title");
    if (attributes.indexOf(title) === -1) {
        var listItem = document.createElement("li");
        var listTitle = document.createTextNode(title);
        listItem.setAttribute("title", title);
        listItem.appendChild(listTitle);
        list.appendChild(listItem);
    }
   else {
       return false;
   }
});

这是在节点列表中查找值的一种方法。（非jquery）



Test1
Test2
Test3


添加标题：添加它！

var entryLog=document.getElementById（'entry_log'）；
var itemList=document.getElementById（'item_list'）；
var itemEntry=document.getElementById（'item_entry'）；
功能附加项（项目）{
如果（！titleExists（项目））{
var newItem=document.createElement（'LI'）；
newItem.title=项目；
newItem.className='列表组项'；
var itemText=document.createTextNode（项）；
newItem.appendChild（itemText）；
itemList.appendChild（newItem）；
entryLog.style.color='绿色'；
entryLog.innerHTML='新项目：'+Item+'已成功添加'；
}否则{
entryLog.style.color='red'；
entryLog.innerHTML=项+“已存在”；
}
}
函数titleExists（标题）{
var listItems=itemList.getElementsByTagName（'LI'）；
var titleCheck=false；
对于（变量i=0；i


节点列表很方便，但不能对其使用indexOf（）之类的数组函数。你只要把所有的嫌疑犯都集中起来，把他们一个个打出来就行了
任何js库都会有一个较短的版本，但是递归仍然必须在某个地方进行，即使你看不到它。
你可以简单地用$循环trought标题。每个函数

函数检查标题（newTitle）{
var listGroup=$（“#列表组li”）；
$.each（列表组、函数（i、s）{
var title=$（s）.attr（“title”）；
if（newTitle.toLowerCase（）==title.toLowerCase（））{
$（“.message”）.html（“Title allready exist！”）
返回false；
}否则{
$（“.message”）.html（“标题不存在！”）
}
})
}
$（“表格”）。关于（“提交”，职能部门（e）{
e、 预防默认值（）；
var newTitle=$（“#新标题”）.val（）；
支票抬头（新标题）
});


Test1
Test2
Test3

发送
请将您尝试过的内容包括在内。很高兴我帮了你！然后，您可以通过单击左侧的复选标记来接受答案吗？@user1505698在Stackoverflow上表示感谢的正确方式是接受并向上投票有用的答案。请接受她/他的回答，感谢他在你的问题上投入的时间。
var button = document.getElementById("my-button");
var list = document.getElementById("my-list");

button.addEventListener("click", function() {
    var title = prompt("Enter a title");
    if (attributes.indexOf(title) === -1) {
        var listItem = document.createElement("li");
        var listTitle = document.createTextNode(title);
        listItem.setAttribute("title", title);
        listItem.appendChild(listTitle);
        list.appendChild(listItem);
    }
   else {
       return false;
   }
});

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>

<ul id = "item_list">
        <li class="list-group-item" title="Test1">Test1</li>
        <li class="list-group-item" title="Test2">Test2</li>
        <li class="list-group-item" title="Test3">Test3</li>
</ul>

    <p>
        Add Title:  <input type = "text" id = "item_entry"><button onclick="addItem(itemEntry.value)">Add It !</button>
    <p id = "entry_log"></p>

    </body>
    <script>

    var entryLog = document.getElementById('entry_log');
    var itemList = document.getElementById('item_list');
    var itemEntry = document.getElementById('item_entry');

            function addItem(item) {
                if ( !titleExists (item) ) {
                    var newItem = document.createElement('LI');
                    newItem.title = item;
                    newItem.className = 'list-group-item';

                    var itemText = document.createTextNode(item);
                    newItem.appendChild(itemText);

                    itemList.appendChild(newItem);

                    entryLog.style.color = 'green';
                    entryLog.innerHTML = 'New Item: ' + item + ' added successfully.';
                } else {
                        entryLog.style.color = 'red';
                        entryLog.innerHTML = item + ' already exists';
                    }

            }


            function titleExists (title) {
                var listItems = itemList.getElementsByTagName('LI');
                var titleCheck = false;
                    for (var i = 0; i < listItems.length; i++) {
                        if ( title == listItems[i].getAttribute('title') ) {
                            titleCheck = true;
                        }
                    }
                return titleCheck;
            }

    </script>
    </html>