Question

代码：

$('#friends_list ul li').click(function () {
    var name = $(this).attr('value');
    var parentlist = $('#chat_opened ul');
    var overflow = parentlist.children('li').length;
    var allowed = 5;
    var childC = parentlist.children('li').attr('value');
    if (overflow <= allowed && childC != name) {
        parentlist.append('<li value="' + name + '">' + name + ' Chat</li>');
    } else if (overflow > allowed) {
        $('#inner_overflow ul').append('<li value="' + name + '">' + name + ' Chat</li>');
    }

在我的if语句行中，我试图比较两个变量是否为真，然后执行以下操作。所以基本上如果overflow小于或等于允许的数字，childC不等于name附加到父列表

在我弄清楚如何比较两个li值之后，否则将会是相同的。

EX：

<ul>
 <li value="usersname">Username</li>
<ul>
<ul> 
  <li value="usersname">Username</li>//no more than two in this unordered list
</ul>

因此，当用户点击第一个ul li时，它会将另一个li附加到第二个ul，但不会两次。截至目前，它将附加相同li的100个，所以我需要弄清楚如何制作它，以便第二个ul不会复制具有相同值的任何相同li。

Answer 1

如果不进行您可能对代码所做的所有更改，要完成您所询问的内容，您只需检查目标列表中<li>的数量即可具有您准备添加的值的那个：

var name = $(this).attr('value');
var parentlist = $('#chat_opened ul');
var overflow = parentlist.children('li').length;
var allowed = 5;
var duplicates = parentlist.find('li[value="' + name + '"]');

if (overflow <= allowed && duplicates.length < 1) {
    . . .

这将检查是否存在任何已存在该值的<li>。如果没有（即length < 1），则可以安全地添加值。

Answer 2

如果您使用HTML 4.01，则可以执行以下操作：

<ol>
  <li value="username">User Name</li>
  ...
</ol>

但请注意this is deprecated。

$('#friends_list ul li').click(function () {
  var name = $(this).attr('value');
  var parentlist = $('#chat_opened ul');
  var overflow =0;
 //need to add these lines
  $('#friends_list ul li').each(function(i)
  {
   if($(this).attr('value')==name)
          overflow++;
   });
   var allowed = 5;
   var childC = parentlist.children('li').attr('value');
   if (overflow <= allowed && childC != name) {
   parentlist.append('<li value="' + name + '">' + name + ' Chat</li>');
  } else if (overflow > allowed) {
    $('#inner_overflow ul').append('<li value="' + name + '">' + name + ' Chat</li>');
 }

Answer 3

value属性在li元素上无效，但如果您真的想在每个li上使用值，那么您可以将其与html-5 data-属性一起使用，如：

HTML 的

<ul id='first'>
 <li data-value="usersname">Username</li>
<ul>
<ul id='second'> 
  <li data-value="usersname">Username</li>//no more than two in this unordered list
</ul>

JS

  $("#first > li").click(function(){
    var self = this;
    var present = false;
    $.each($("#second > li"), function(i,v){
       if($(v).data("value") ==  $(self).data("value")){
         present = true;
         return true;
       }
    });
    if(!present) {
     $("#second").append(self);
    }
    else
    {
      //item with same value already present in the secont ul list
    }
  });

检查li值是否相同

3 个答案: