javascript - 如何找到 DIVS 的 ID，并将这些名称作为类分配给其他 DIVS？

Question

我是 jquery 的新手，无法理解这一点。我有 3 个具有不同 ID 的 div，但都以“sharedform”开头。我想遍历这些 div，获取每个 id 并将其作为标识类分配给每个之前的“slideHead”div。任何帮助将不胜感激!

HTML:

<div class="slideHead">
</div>
<div class="drawer">
  <div id="sharedform.upload_image">
          <p></p>
  </div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
   <div id="sharedform.Event">
       <p></p>
   </div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
    <div id="sharedform.BackGround_All">
        <p></p>
    </div>
 </div>

j查询:

var $getclass = $(".drawer");
    addclass = $getclass.find('[id^="sharedform"]').attr('id');
$(".slideHead").addClass(addclass);

Answer 1

我建议:

// get all elements whose id starts with 'sharedform', iterate over that collection:
$('div[id^=sharedform]').each(function (){
    // find the parent of the 'this' element:
    $(this).parent()
    // find the previous element, if it matches the passed-in selector:
    .prev('.slideHead')
    // add the id of the element we initially selected as a class:
    .addClass(this.id);
});

$('div[id^=sharedform]').each(function() {
  $(this).parent().prev('.slideHead').addClass(this.id);
});

div {
  width: 80%;
  margin: 0 auto;
  min-height: 2em;
  padding: 0.5em;
  border: 1px solid #000;
}
.slideHead {
  background-color: #f00;
}
.slideHead.sharedform\.something {
  background-color: #0f0;
}

<div class="slideHead"></div>
<div>
  <div id="sharedform.something">some text in the div</div>
</div>

但请注意，考虑到在 id 中包含句点 (.)，这些类名是有问题的。