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

您可以按照以下方式进行操作。查看演示 - Fiddle。

}


.article img{
height:150px;
width:150px;
border:"5";


 }
.article p{
width:800px;
height:65px;
font-size:16pt;
color:black;
text-decoration: none;
}
.article{
padding-top:0px;
/*overflow:hidden;*/

}

ul #mylist li{ list-style-type: none;
}
#mylist li{display:none;}
ul #mylist li img{
height:150px;
width:150px;
border="5";
}


#load {
/*  position: fixed; */
height: 30px; 

width: 100%; 
margin-top:0px;
overflow:hidden;

}

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 个答案: