javascript - 选择/克隆子类的父类 - 将文本附加到父类和appendTo/insertAfter结果中的各种属性

Question

正如标题所示，我试图通过提供子级的类来选择父级 div。

然后我需要获取该父级的全部内容并且

1. 将文本附加到所有元素的“id”属性的开头
2. 将文本附加到所有元素的“for”属性的开头

然后我需要通过 insertAfter 或appendTo 将其输出到另一个 div。我更愿意将其附加到一个空的 div 中，该 div 将具有类或 ID。

到目前为止我有点困惑:

$('a[class="on  maincatlink"]') // using this to select the parent
.parent() // parent is class="div2" but we cannot use "div2" as the selector
.clone($().find($ ("label").attr('for', +'helloworld')).find($("input").attr('id', +'helloworld')))
.insertAfter(".leftBoxContainer");
});

这里存在一些问题，首先，这不仅将 ID 和 FOR 更改应用于克隆的内容，而且还应用于正在克隆的原始内容。其次，我不明白如何将“helloworld”附加到 ID 或 FOR 属性的开头。这里的结果是最终提供 id="NaN"- 那么代码就是错误的，如果有人可以提供一些指示，谢谢。

为了更简单的解释，无需修改我丑陋的代码:

我需要选择 $('a[class="on maincatlink"]') 的父级 - 将静态文本附加到所有输入 ID 的开头，将静态文本附加到所有标签 FOR 和输出的开头结果在页面其他位置的 div 中。

编辑://有关 HTML 的更多信息

<div class="div2"><input checked="" class="catcheckbox" id="checkboxid1" type="checkbox"><label class="maincatlabel" for="checkboxid1"></label><a href="http://127.0.0.1/zen11/index.php?main_page=index&amp;cPath=1" class="on  maincatlink">MOBILE PHONES</a>
<div class="div1">
<div class="div2"><input checked="" class="catcheckbox" id="checkboxid2" type="checkbox"><label class="subcatlabel" for="checkboxid2"></label><a href="javascript:void(0)" style="cursor:default" class="on  subcatlink">APPLE</a></div>
<div class="div2"><input class="catcheckbox" id="checkboxid6" type="checkbox"><label class="subcatlabel" for="checkboxid6"></label><a href="http://127.0.0.1/zen11/index.php?main_page=index&amp;cPath=1_6" class="off subcatlink">SAMSUNG</a></div>
</div>
</div>

正如上面的 html 中一样，当类别或子类别处于事件状态时，它使用类“on maincatlink”和“on subcatlink”。如果类别未激活(正在由用户浏览)，则应用“off maincatlink/subcatlink”类。

“on”类在当前所选子类别所属的所有先前类别中产生共鸣。我想选择所有这些“on”类别并将它们列在另一个 div 中。我想保留复选框和标签，以便保留它创建的树形菜单。

Answer 1

JS:

$(function () {
    var cloned = $('.on.maincatlabel')
        .parent()
        .clone();
    cloned.find('label')
        .each(function (index, element) {
        $(element).attr({
            'id': 'prefix-' + $(element).attr('id'),
                'for': 'prefix-' + $(element).attr('for')
        });
    });
    cloned.appendTo('body');

    $(document).on('click', 'label.on', function (e) {
        window.location.href = $(this).attr('data-href');
    });
});

使用类似 HTML:

<div class="div2">
    <label class="maincatlabel on" for="checkboxid1" data-href="http://127.0.0.1/zen11/index.php?main_page=index&amp;cPath=1">
        <input checked="" class="catcheckbox" id="checkboxid1" type="checkbox" />MOBILE PHONES</label>
    <div class="div1">
        <div class="div2">
            <label class="subcatlabel on" for="checkboxid2">
                <input checked="" class="catcheckbox" id="checkboxid2" type="checkbox" />APPLE</label>
        </div>
        <div class="div2">
            <label class="off subcatlabel" for="checkboxid6" data-href="http://127.0.0.1/zen11/index.php?main_page=index&amp;cPath=1_6">
                <input class="catcheckbox" id="checkboxid6" type="checkbox" />SAMSUNG</label>
        </div>
    </div>
</div>

See in actionish