Question

所以...我在页面上有四个div。它们中的所有四个都属于class foobar。我想在这里做的是给每个人一个来自JavaScript中某个Array的值。请注意我使用的是jQuery 3.2.1。

我的JavaScript：

var $elements = jQuery.makeArray($(".foobar"));
[1,2,3,4].forEach(function (x) {
  $elements.forEach(function (y) {
    y.text(x.toString());
  });
});

我的HTML：

<div class="foobar"></div>
<div class="foobar"></div>
<div class="foobar"></div>
<div class="foobar"></div>

和往常一样，它不起作用。基本上我想在这里做的是将Number中的每个Array作为每个text()的{{1}}。

Answer 1

您正在为内循环内的每个元素设置相同的文本。试试这个

var $elements = $(".foobar");
[1,2,3,4].forEach(function (x, i) {
  $($elements[i]).text(x)
});

或使用.text(func)

var texts = [1,2,3,4];
var $elements = $(".foobar").text(function(i) {
   return texts[i];
})

Answer 2

创建一个数字数组，遍历所有.foobar元素，并从数组中指定一个值。

var $elements = jQuery.makeArray($(".foobar"));
var numbers = [1, 2, 3, 4];
var count = 0;
$(".foobar").each(function() {
  $(this).text(numbers[count]);
  count++;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My HTML:

<div class="foobar"></div>
<div class="foobar"></div>
<div class="foobar"></div>
<div class="foobar"></div>

Answer 3

检查这个小提琴。 https://jsfiddle.net/bj3s92gr/
Bassicaly你必须用类foobar来填充div，并在html中确定数组的位置。

    $(document).ready(function(){

     $("#add_user").validate({
      rules: {
       first_name: {
        required: true,
        lettersonly: true
      },
      last_name:{
        required: true,
        lettersonly: true
      },
      email_address:{
        required: true,
        email: true
      },
      password:{
        required: true
      },
      contact:{
        required: true,
        digits: true
      },
      profile_pic:{
        extension: "jpg|png|jpeg"
      }
    },
    messages:{
      first_name: {required:"First Name cannot be empty",lettersonly: "Enter valid first name"},
      last_name: {required:"Last Name cannot be empty",lettersonly: "Enter valid last name"},
      email_address:{required:"Email Address cannot be empty",email:"Enter valid email address"},
      password:"Password cannot empty",
      contact:{required: "Contact cannot be empty",digits:"Enter valid contact number"},
      profile_pic:"Please select valid file .jpg, .png, .jpeg are allowed"
    },

    submitHandler: function (form) {
     $('#add_user').on('submit', function(e) { 
       e.preventDefault();  
       var form=document.getElementById('add_user');
       var fdata=new FormData(form); 
       $.ajax({
         type: "POST",
         url: '<?php echo base_url(); ?>Admin/add_members',
         data: fdata,
         processData: false,
          contentType: false,
         beforeSend: function () {
          $('#loading').show();
          $("#btn_add_user").hide();
          $('#cm_main_success').hide();
          $('#cm_main_fail').hide();
        },
        success: function(data){
          if(data == 1)
          {           
            $('#cm_main_success').show();
            $('#cm_main_msg').html("User added successfully");
            $('#cm_main_success').fadeOut(6000);  
            setTimeout(function(){ window.location.href = '<?php echo base_url();?>Admin/view_members'; }, 3000);
          }
          else if(data == 2)
          {
            $('#cm_main_fail').show();
            $('#cm_main_fmsg').html("Email address already exist");
            $('#cm_main_fail').fadeOut(6000);
             me.data('requestRunning', false);
          }
          else
          {
            $('#cm_main_fail').show();
            $('#cm_main_fmsg').html("Something Went Wrong!");
            $('#cm_main_fail').fadeOut(6000); 
          }
        },
        complete: function () {

          $('#loading').hide();
          $("#btn_add_user").show();

        }

      });

    });
    }

 }); 

   });

为每个元素提供唯一的文本

3 个答案: