Question

如果他们的锚值中有相同的城市，我想要确保只有两个li元素。它们呈现为：

<ul>
  <li>
    <a href='/home.aspx'>Calgary</a><span>[+]</span>
    <ul class='courses'>
      <li>Course Name 1</li>
    </ul> 
  </li>
</ul>

<!-- Remove this ul after grabbing the inner <li> (Course Name) -->
<ul>
  <li>
    <a href='/home.aspx'>Calgary</a><span>[+]</span>
    <ul class='courses'>
      <li>Course Name 2</li>
    </ul> 
  </li>
</ul>

<!-- Leave this ul alone -->
<ul>
  <li>
    <a href='/home.aspx'>Montreal</a><span>[+]</span>
    <ul class='courses'>
      <li>Course Name 3</li>
    </ul> 
  </li>
</ul>

使用jQuery，请告诉我如何获取'Course Name 2'li并将其放在'Course Name 1'父级ul下。另外，我想删除标有“RemoveMe”的原始ul。

Answer 1

我有一些有用的东西，冒昧地增加了一个名为＆＃34; city＆＃34;一些li元素，以帮助区分它们。

JSFiddle here

它遍历并发现其他锚点共享相同的文本，但不引用相同的元素。然后它会在列表中找到课程并将其添加到原始锚点列表中。我认为可以通过添加其他类来更清楚，但一般概念就在那里。

我最初没有想到的一件事是需要确保元素仍然可见。我抓住顶部的锚点阵列，即使在被移除后它们仍然被引用。

$(function() { 

    $('li.city a').each(function(ix) {

        if ($(this).is(':visible'))
        {

            var $anchor = $(this);
            var myText = $(this).text();

            var $matches = $('a').filter(function() {
                return (($(this).text() == myText) && (this !== $anchor.get(0)));
            });

            $.each($matches, function() {

                var $snip = $(this).parent().find('ul.courses li');

                // add the li elements to the first anchor's list
                $anchor.parent().find('ul.courses').append($snip);

                // bubble up to duplicate anchor's ul tag and remove it entirely
                $(this).closest('li.city').parent().remove();

            });

        }

    });

});

Answer 2

这样的事情应该有效，但我承认 - 我没有测试这段代码。

$("ul").each(function(){
    // get city
    var city = $(this).find("li > a").text();

    // find similar cities
    var other = $(this).siblings("ul").has("li > a:contains('"+city+"')");

    // move LI elements and remove similar ULs
    // not sure, maybe this should be done one by one (using each() for example)
    // that's in case if you have found more than 1 similar entry
    other.find("ul.courses > li").appendTo($(this).find("ul.courses"));
    other.remove();
});

Answer 3

这些方面的东西都可行。

我已经给了第一个<ul>个ID＆＃34; Ul1＆＃34;为了简单起见。

 var x = $("#RemoveMe").getChildren().first();

    if( $("#RemoveMe").getChildren().eq(1).text() == $("#Ul1").getChildren().eq(1).text())
{
    $("#Ul1").getChildren().first().append(x);

    $("#RemoveMe").getChildren().first().remove();
}

更通用的解决方案：

$("li").each(function(){
  if ($(this).getChildren().first().text() == "some city name")
 {
    $("#Ul1").getChildren().first().append($(this));
    $(this).remove();
 }  
});

注意：我建议将这些特定的<li>特定的类名用作选择器。

Answer 4

<ul id='AddToMe'>
  <li>
    <a href='/home.aspx'>Calgary</a><span>[+]</span>
    <ul class='courses'>
      <li>Course Name 1</li>
    </ul> 
  </li>
</ul>

<ul id='RemoveMe'>
  <li>
    <a href='/home.aspx'>Calgary</a><span>[+]</span>
    <ul class='courses'>
      <li>Course Name 2</li>
    </ul> 
  </li>
</ul>

<script>
$(document).ready(function() {
   if($('#AddToMe a').text() == $('#RemoveMe a').text()){
       $('#RemoveMe').find('.courses li').appendTo($('#AddToMe .courses'));
       $('#RemoveMe').remove();
   }
});
</script>

jsFiddle

编辑说明 - 添加删除＆＃34; RemoveMe＆＃34; id ul 编辑2 - 添加if条件来比较锚标记

使用JQuery将元素移动到另一个父级并删除原始元素

4 个答案: