需要父和子div的映射

Question

我有以下示例HTML

<div id="page1">
  <fieldset id="groupA">
  </fieldset>
</div>
<div id="page4">
  <fieldset id="groupG">
  </fieldset>
</div>
<div id="pageC">
  <fieldset id="group3">
  </fieldset>
</div>

我需要div id及其对应groupId的映射。 这对Jquery来说可能吗？

Answer 1

  

键值对的映射

您可以使用：

var result= {};
$("div").each(function() {
 var key = $(this).attr('id');
 var value = $(this).find('fieldset').attr('id');
 result[key] = value;
});

<强> Working Demo

Answer 2

试试这个：请参阅控制台了解结果

  $('div').each(function )( {
      $page = $(this).attr('id');
      $group = $(this).children('fieldset').attr('id');
     console.log($page+' '+$group);
    });

Answer 3

首先将所有div包装在另一个div中，以便您只选择那些div

<div id="parent">
   <div id="page1">
       <fieldset id="groupA">
       </fieldset>
   </div>
   <div id="page4">
       <fieldset id="groupG">
       </fieldset>
   </div>
   <div id="pageC">
       <fieldset id="group3">
       </fieldset>
   </div>
</div>

然后在jquery中使用此代码

$('#parent > div').each(function() {
   var page = $(this).attr('id');
   var group  = $(this).find('fieldset').attr('id');
   console.log(page+" "+group);
});

Answer 4

我不确定映射的含义，但如果您只需要群组与其父div之间的某种关联，则可以尝试使用data属性

示例

<div id="page1">
  <fieldset id="groupA" data-parent="page1"> <!-- the id of the parent -->
  </fieldset>
</div>

您稍后可以提取此信息并使用它来查找或执行对您父母的任何操作。

Answer 5

这很容易做到

我们将使用jquery函数创建一个映射函数：

var m=function mymap(mp) 
{
 return $(mp).map(function() {
    return $(this).find('fieldset').get(0);
  })
}

现在：m是一个接受div并返回相应fieldset

的函数

示例：

m("#page4").css('background-color','red') // reference div but actually affects its fieldset

结果：

见这里：http://jsbin.com/zakiyo/3/edit