如何将每个同级元素附加到jQuery中的同级元素？

Question

I have div's in wordpress and each div has a <ul></ul>

<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 1</li>
    <li>Content 1</li>
    </ul>
</div>

<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 2</li>
    <li>Content 2</li>
    </ul>
</div>

I want to append each class="hyrra-forrad-size-list" to its sibling class="list-item"

My current jquery code looks like below:

var j = jQuery.noConflict();

j(function() {
  j('.list-item .hyrra-forrad-size-list').each(function() {
    j(this).appendTo('.elimore_trim');
  });
});

The problem with my code above is that all elements that have the class hyrra-forrad-size-list is being inserted to each element that has a class of elimore_trim

For example:

<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 1</li>
    <li>Content 1</li>
    </ul>

    <ul class="hyrra-forrad-size-list">
    <li>Hyra 2</li>
    <li>Content 2</li>
    </ul>

</div>

<div class="list-item">
    <div class="elimore_trim">
    Lorem ipsum
    </div>
    <ul class="hyrra-forrad-size-list">
    <li>Hyra 1</li>
    <li>Content 1</li>
    </ul>

    <ul class="hyrra-forrad-size-list">
    <li>Hyra 2</li>
    <li>Content 2</li>
    </ul>
</div>

Do you know how can i just transfer the class hyrra-forrad-size-list to its own sibling only? Any idea is appreciated. Thanks

Answer 1

Though .appendTo() and .append() both works same, their syntax is little bit different.

.appendTo() insert every element in the set of matched elements to the end of the target like

$(element_to_be_append).appendTo(append_to_this);

.append() insert content, specified by the parameter, to the end of each element in the set of matched elements like

$(append_to_this).appendTo(element_to_be_append);

Target the parent() to find() the element specific element you want to append.

Using .appendTo() :

 var j = jQuery.noConflict(); j(function() { j('.list-item .hyrra-forrad-size-list').each(function() { j(this).parent().find('.elimore_trim').appendTo(j(this)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list-item"> <div class="elimore_trim"> Lorem ipsum </div> <ul class="hyrra-forrad-size-list"> <li>Hyra 1</li> <li>Content 1</li> </ul> </div> <div class="list-item"> <div class="elimore_trim"> Lorem ipsum </div> <ul class="hyrra-forrad-size-list"> <li>Hyra 2</li> <li>Content 2</li> </ul> </div> 

Using .append() :

 var j = jQuery.noConflict(); j(function() { j('.list-item .hyrra-forrad-size-list').each(function() { j(this).append(j(this).parent().find('.elimore_trim')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list-item"> <div class="elimore_trim"> Lorem ipsum </div> <ul class="hyrra-forrad-size-list"> <li>Hyra 1</li> <li>Content 1</li> </ul> </div> <div class="list-item"> <div class="elimore_trim"> Lorem ipsum </div> <ul class="hyrra-forrad-size-list"> <li>Hyra 2</li> <li>Content 2</li> </ul> </div>