访问多个动态对象jquery

Question

我认为您可以通过查看jsfiddle https://jsfiddle.net/brendanjackson/zmxrfpas/4/来解决这个问题，但以防万一。我希望用户在文本框中输入他们选择的任何数据。然后在第一组中选择一个表，然后单击＆＃34;提交＆＃34;按钮发送它。

<div>
  <Div> <h1>
  Start
  </h1>
    Task:<input type="text" id="input_text">
  </Div>


  <div>
  Send to:
  <select id="send_to"> <option value="set1table1">set1table1</option>     <option value="set1table2">set1table2</option> <option value="set1table3">set1table3</option> <option value="set1table4">set1table4
                  </option> </select>
  </div>
  <input type ="button" id = 'submit_button'value="Submit!"/>

</div>

在我遇到麻烦的地方，当我发送用户输入信息时，我还会向用户选择的任何表发送新的下拉选择菜单和新按钮。我不确定如何访问这些信息，因为我不知道如何给它一个＆＃34; ID＆＃34;或者就此而言任何访问它的方式。我需要能够访问该信息并将其发送到下一组表格。

     $('#submit_button').click(function(){
       input_text = $('#input_text').val();

       options_menu = '<select  id="options_menu"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
       index_item = '<input type="submit" name="get" id="get" value="Get selected index" />'


       send_to = $("#send_to option:selected");
       console.log("index: " + send_to.index() );

var send_index = send_to.index()

switch(send_index){

  case 0:
    $('#set1_text1').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;

  case 1:
  $('#set1_text2').append("<ul>" + "<li>" +input_text+  "  " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;

  case 2:
  $('#set1_text3').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;

  case 3:
  $('#set1_text4').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;

}

});

最初（部分代码仍然在小提琴中）我只是用户创建了菜单和按钮，但这对我来说真的很难看。我也尝试使用＆＃34; .live＆＃34;但我真的不认为我完全掌握它是如何运作的，我甚至不确定单独使用它是否可行。

肯定有其他人在那里遇到类似的麻烦，但我并没有真正看到任何类似的东西。我已经坚持了一段时间，所以我真的很感激一些帮助。如何访问发送到表集1的每个对象的信息并将其发送到集合2的其中一个表？

Answer 1

在不同的点上，您的代码正在DOM中创建重复的ID。您可以拥有重复的类，但永远不会重复ID。在这个答案中，我们使用了一个计数器itm来确保没有创建重复的ID（但是可以使用类名）。

此外，我们在第2部分的ID开头修复了缺失的#。

如果您可以使用更新版本的jQuery，则可以使用.on()代替.live()和.bind()。非常喜欢！

input_text被创建为全局变量，以便您可以从任何函数中访问当前值。 （这是通过在所有函数之外声明它来完成的。）

See this answer了解.on()工作原理的基础知识。

jsFiddle Demo

<强> jQuery的：

var itm=0, input_text;
$(document).ready(function() {
    $('body').css({'background':'wheat'});
  var options_menu;
  var get;
  var selectedIndex;

  $('#submit_button').click(function() {
    itm++;
    input_text = $("#input_text").val();

        send_to = $("#send_to option:selected");
    var send_index = send_to.index()

    options_menu = '<select id="options_menu-'+itm+'"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
    index_item = '<input type="button" id="get-'+itm+'" data-from="'+send_index+'" value="Get selected index" />'
        send_index++;
    $('#set1_text'+send_index).append("<ul>" + "<li>" + input_text + " " + options_menu + "" + index_item + "</li>" + "</ul>");

  });

  $(document).on("click", '[id^=get-]', function() {
      var si = $('#options_menu-'+itm+' option:selected');
  alert('bob');
      var get_index = si.index();
      var from_index = $(this).data('from');
      from_index++; //from_index is zero-based, but Tables are not

      itm++;
      get = '<input type="submit"  name="get" id="get'+itm+'" value="Get selected index" />';
      itm--;
      var final = "<ul>" + "<li>" + input_text + " (from Table " +from_index+ ")" + "</li>" + "</ul>";
    get_index++;
    $("#set2_text"+get_index).append(final);

  }); //END document.on


}); //END document.ready

<强> HTML：

<div>
  <div>
    <h1>Start</h1>
      Task: <input type="text" id="input_text" />
  </div>

  <div>
    Send to:
    <select id="send_to">
      <option value="set1table1">set1table1</option>
      <option value="set1table2">set1table2</option>
      <option value="set1table3">set1table3</option>
      <option value="set1table4">set1table4</option>
    </select>
  </div>
  <input type="button" id='submit_button' value="Submit!" />
</div>

<div>
  <h1>Set1</h1>
  <div id="set1table1">
    <h3>set1table1</h3>
    <ul id="set1_text1"></ul>
  </div>

  <div id="set1table2">
    <h3>set1table2</h3>
    <ul id="set1_text2"></ul>
  </div>

  <div id="set1table3">
    <h3>set1table3</h3>
    <ul id="set1_text3"></ul>
  </div>

  <div id="set1table4">
    <h3>set1table4</h3>
    <ul id="set1_text4"></ul>
  </div>
</div>

<div>
  <h1>Set2</h1>
  <div id="set2table1">
    <h3>set2table1</h3>
    <ul id="set2_text1"></ul>
  </div>

  <div id="set2table2">
    <h3>set2table2</h3>
    <ul id="set2_text2"></ul>
  </div>

  <div id="set2table3">
    <h3>set2table3</h3>
    <ul id="set2_text3"></ul>
  </div>

  <div id="set2table4">
    <h3>set2table4</h3>
    <ul id="set2_text4"></ul>
  </div>
</div>

Answer 2

$(document).ready(function() {
var input_text = $("input_text").val();
var options_menu ;
var get;
var selectedIndex ;

$('#submit_button').click(function(){
input_text = $('#input_text').val();

options_menu = '<select  class="options_menu"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
index_item = '<input type="submit" name="get" class="get" value="Get selected index" />'


send_to = $("#send_to option:selected");
console.log("index: " + send_to.index() );

var send_index = send_to.index()

switch(send_index){

case 0:
$('#set1_text1').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;

case 1:
$('#set1_text2').append("<ul>" + "<li>" +input_text+  "  " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;

case 2:
$('#set1_text3').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;

case 3:
$('#set1_text4').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;

}

});
$('.get').live("click", function() {
get = '<input type="submit"  name="get" class="get" value="Get selected index" />';

selectedIndex = $(this).closest('li').find('select.options_menu option:selected');

console.log("index: " + selectedIndex.index() );

var get_index = $(this).closest('li').find('select.options_menu option:selected').index();

alert(get_index)

switch(get_index) {

case 0:
$( "#set2_text1" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
break;

case 1:
$( "#set2_text2" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
break;

case 2:
$( "#set2_text3" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
break;

case 3:
$( "#set2_text4" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
break;

default:
alert("Error");

}}); });

Answer 3

尝试此操作以迭代附加到div的所有<ul>元素：

$('#set1_text1 > ul').each(function(index, element) {
   console.log(index + ": ", element);
   //Access whatever data attributes of the element you need
   console.log($(this).find('#options_menu option:selected'));
});

Answer 4

替换

get = '<input type="submit"  name="get" id="get" value="Get selected index" />';
selectedIndex = $("#get option:selected");

使用

selectedIndex = $(this).siblings("select").index();

并且不使用.live，而是使用$(".container").on("click", "input[name=get]", function(){})。

＆＃13;

＆＃13;

$(document).ready(function() {
	  var input_text = $("input_text").val();
    var options_menu ;
    var get;
    var selectedIndex ;
    
     $('#submit_button').click(function(){
       input_text = $('#input_text').val();
       
       options_menu = '<select  id="options_menu"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
       index_item = '<input type="submit" name="get" id="get" value="Get selected index" />'
     
      
       send_to = $("#send_to option:selected");
       console.log("index: " + send_to.index() );
    
var send_index = send_to.index()
  
switch(send_index){

  case 0:
    $('#set1_text1').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  
  case 1:
  $('#set1_text2').append("<ul>" + "<li>" +input_text+  "  " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  
  case 2:
  $('#set1_text3').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  
  case 3:
  $('#set1_text4').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;

}

});



  $('.container').on("click", "input[name=get]", function() {
 get = $(this).siblings("select");
 selectedIndex = get.find("option:selected");

  console.log("index: " + selectedIndex.index() );
 
 var get_index = selectedIndex.index()
 alert(get_index);


switch(get_index) {

case 0:
  $( "set2_text1" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
  break;

  case 1:
  $( "set2_text2" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
  break;

  case 2:
  $( "set2_text3" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
  break;

  case 3:
  $( "set2_text4" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
  break;

  default:
  alert("Error");


}

  });
    

});

  

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <Div> <h1>
  Start
  </h1>
    Task:<input type="text" id="input_text">
  </Div>


  <div>
  Send to:
  <select id="send_to"> <option value="set1table1">set1table1</option>     <option value="set1table2">set1table2</option> <option value="set1table3">set1table3</option> <option value="set1table4">set1table4
                  </option> </select>
  </div>
  <input type ="button" id = 'submit_button'value="Submit!"/>

</div>


<div class="container">
<div>
  <h1>
  Set1
  </h1>
  
  <div id="set1table1">
          <h3>set1table1</h3>
          <ul id="set1_text1"></ul> 
  </div>

  <div id="set1table2">
          <h3>set1table2</h3>
          <ul id="set1_text2"></ul> 
  </div>

  <div id="set1table3">
          <h3>set1table3</h3>
          <ul id="set1_text3"></ul> 
  </div>

  <div id="set1table4">
          <h3>set1table4</h3>
          <ul id="set1_text4"></ul> 
  </div>
</div>

<div> <h1>Set2</h1>
 <div id="set2table1">
          <h3>set2table1</h3>
          <ul id="set2_text1"></ul> 
  </div>

  <div id="set2table2">
          <h3>set2table2</h3>
          <ul id="set2_text2"></ul> 
  </div>

  <div id="set2table3">
          <h3>set2table3</h3>
          <ul id="set2_text3"></ul> 
  </div>

  <div id="set2table4">
          <h3>set2table4</h3>
          <ul id="set2_text4"></ul> 
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;