从UL列表中获取标题属性并检查标题是否已存在

Question

我有这个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>

我有一个字符串，新的<li>要插入，但我需要检查这个新标题是否已存在以防止重复。

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

Answer 1

您可以按照以下方式进行操作。 检查演示 - 小提琴。

var newTitle = 'Test1';
if ( $('[title="' + newTitle  + '"]').length === 0 ) {
    $('ul').append('<li class="list-group-item" title="' + newTitle +'">' + newTitle + '</li>');
}

Answer 2

你可以尝试这样的事情

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

您想要创建一个新数组，您将存储所有标题属性。 我们将使用通配符选择器*查询DOM中所有元素的列表。 有了这个，我们可以迭代所有DOM元素，并获得它们的标题，这些标题将存储在我们的属性数组中。

为了节省空间，我们将首先检查每个元素是否具有title属性。 只有这样，我们才会将元素追加到数组中。

var attributes = [];

var allElements = document.querySelectorAll("*");

for (var i = 0; i < allElements.length; i++) {
    if (allElements[i].getAttribute("title")) {
        attributes.push(allElements[i].getAttribute("title"));
    }
}

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

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;
   }
});

Answer 3

您可以使用$.each函数简单地循环标题。

 function checkTitle(newTitle){ var listGroup = $("#list-group li"); $.each(listGroup, function(i, s){ var title = $(s).attr("title"); if(newTitle.toLowerCase() === title.toLowerCase()){ $(".message").html("Title allready exist!") return false; } else { $(".message").html("Title does not exist!") } }) } $("form").on("submit", function(e){ e.preventDefault(); var newTitle = $("#new-title").val(); checkTitle(newTitle) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="list-group"> <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> <form id="form-new-title"> <input type="text" id="new-title"> <button id="submit"> Send </button> </form> <div class="message"> </div>

Answer 4

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

 var titles = ['i1','i2','i4']; $('ul li').each(function(){ var tmpTitle = $(this).attr('title'); if(titles.indexOf(tmpTitle) > -1) { // already exists } else { // doesn't exist } })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li title="i1">item 1</li> <li title="i2">item 2</li> <li title="i3">item 3</li> <li title="i4">item 4</li> </ul>

Answer 5

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

    <!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>

节点列表很方便，但你不能在它们上使用像indexOf（）这样的数组函数。 你只需将所有嫌疑人围捕并单独击败他们。

任何js库都会有一个较短的版本，但递归仍然必须在某个地方继续，即使你没有看到它。

从UL列表中获取标题属性并检查标题是否已存在

问题描述

5 个解决方案

解决方案1
1 2016-02-27 04:01:09

解决方案2
1 2016-02-27 04:02:18

解决方案3
1 2016-02-27 07:13:28

解决方案4
0 2016-02-27 04:01:34

解决方案5
0 2016-02-27 04:52:05

从UL列表中获取标题属性并检查标题是否已存在

问题描述

5 个解决方案

解决方案1 1 2016-02-27 04:01:09

解决方案2 1 2016-02-27 04:02:18

解决方案3 1 2016-02-27 07:13:28

解决方案4 0 2016-02-27 04:01:34

解决方案5 0 2016-02-27 04:52:05

解决方案1
1 2016-02-27 04:01:09

解决方案2
1 2016-02-27 04:02:18

解决方案3
1 2016-02-27 07:13:28

解决方案4
0 2016-02-27 04:01:34

解决方案5
0 2016-02-27 04:52:05