Question

我的DOM中已经有一些href锚点，如下所示： -

    <div id="outermenu">
        <a href="#" id="uniqueid1" class="myclassone">link</a>
        <a href="#" id="uniqueid2" class="myclasstwo">link</a>
    </div>

我正在使用jQuery插入更多的href锚点，所有这些锚点都使用了页面上只有一个其他元素的相同类名，因此将有两个带有“myclassone”类的href实例，其中只有一个会拥有id“uniqueid1”。

当动态插入的锚元素通过另一个单击方法添加到DOM时，我想要做什么，找到具有相同类名的锚，并获得具有相同类名的每个对应元素的唯一id属性并打印这个在id为'box'的div中。

我尝试过以下内容，但无济于事。

$('this').each(function () {
    var anchorid = this.id;
    $("#box").html(anchorid);
});

基本上，我如何遍历DOM并在“outerid”div ID中找到一个元素ID，该ID与新创建的元素具有相同的类名，然后显示元素ID？

更新：感谢您的回复。我没有提到我在devbridge的jquery autocomplete插件中使用它，文档声明$ this绑定到输入元素。

因此我设置了自动完成插件，如下所示： -

   var searchwordss = [
      { value: 'First Word', data: 'myclassone' }, 
....

然后使用数据值输出： -

    var searchresults = '<a href="#" class="' + suggestion.data + '">Click here see more ' + suggestion.value + ' articles.</a>';
    $('#box').html(searchresults);

这会产生： - 点击这里查看更多First Word文章。

因此，我需要获取ID用于其他目的，即已存在于DOM中的锚元素的ID，并且具有类“myclassone” - 请记住，此类名称将根据所选的自动完成搜索词而更改。所以，在我的HTML示例中，$ this绑定到“outermenu”。

Answer 1

在OP的问题中回答这个问题 -

当动态插入的锚元素通过另一个单击方法添加到DOM时，我想要做什么，找到具有相同类名的锚，并获得具有相同类名的每个对应元素的唯一id属性并打印这是一个带有id＆＃39;框的div。

$('#add').click(function(e) {
    e.preventDefault();
    $('a').each(function() {
        if( $(this).hasClass('myclassone') ) {
            $('#box').append(this.id);
        }
    });
});

这可以在这里看到 - http://jsfiddle.net/jayblanchard/3473s/剩下要做的就是计算唯一ID并将新元素添加到页面中。

Answer 2

我假设你的html标签就像......

<div id="outermenu">
        <a href="#" id="uniqueid1" class="myclassone">link</a>
        <a href="#" id="uniqueid2" class="myclasstwo">link</a>

        <a href="#" id="uniqueid3" class="myclassone">link</a>
        <a href="#" id="uniqueid4" class="myclasstwo">link</a>


    </div>

<div id="box">

</div>

你的javascript：

$.each($("a"), function(i,v) {
    var theTag = v.tagName;
    var theElement = $(v);
    var theValue = theElement.val();
      $("#box").html(v.id);
});

见fiddel：http://jsfiddle.net/VLwy6/1/

Answer 3

找到具有相同类名的锚点并获取唯一ID 具有相同类名和的每个对应元素的属性在id为'box'的div中打印出来。

试试这个：

$('a.className').each(function(){
    $('#box').append(this.id);
})

请注意，html（）会替换框内的文本，因此您将看不到以前的ID。改为使用append（）。

示例here

Answer 4

您可以使用[id]选择器为您提供至少具有ID属性的元素

$("[id].myclassone")

将为您提供具有id属性的类myclassone的元素。

因此，如果您对具有特定类的元素有引用，并且您希望其他元素具有相同的类名，但您也可以使用ID属性

$("[id]." + this.className))

所以this是DOM元素（锚点）的原始引用。如果你有一个jQuery参考，你需要使用.get()来获得真正的DOM元素参考。然后你可以获得className属性。您也可以使用$(this).attr("class")。

一个确切的例子是

$("a").on("click", function() {
    var className = this.className;
    var id = $("[id]." + className).attr("id");
    $("#box").append("<p>" + id + "</p>");
});

获取动态创建的现有相同类名元素的ID

4 个答案: