通过<a> gives me href only

Question

I have a simple menu

<div class="nav-container desktop">
    <a href="_index.php?page=_sub_papa&main=klassen">One</a>
    <a href="_index.php?page=_sub_papa&main=tw">Twp</a>
</div>

I am looping through this with jQuery each and then creating <li> tags with the complete <a.../a>.

$.each( $('.nav-container>a'), function(i, item){
        var menupunkt = '<li>' + item + '</li>'
        console.log(i, menupunkt);
    });

Examples: http://codepen.io/anon/pen/bwbgap，https://jsfiddle.net/86g44ssp/

进行Jquery

在我的控制台中，我只看到以下内容

<li>http://xyz.ccom/_index.php?page=_sub_papa&main=tw</li>"

为什么我不能得到整个？因为当我打印“item”时，我得到了整个<a.../a>

Answer 1

item或this代表DOM元素。当您将其视为字符串时，您将其转换为字符串。您可以使用item.outerHTML - 您要查找的字符串 - 代替item。

     $.each( $('.nav-container>a'), function(i, item){
        var menupunkt = '<li>' + item.outerHTML + '</li>'
        console.log(i, menupunkt);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container desktop">
    <a href="_index.php?page=_sub_papa&main=klassen">One</a>
    <a href="_index.php?page=_sub_papa&main=tw">Twp</a>
</div>

注意

不确定它是否有优势，但我更愿意：

    $('.nav-container>a').each(function(i, item){
        var menupunkt = '<li>' + item.outerHTML + '</li>'
        console.log(i, menupunkt);
    });

Answer 2

我已更新your fiddle，您只需更改

即可

 var menupunkt = '<li>' + item + '</li>'

到

 var menupunkt = '<li>' + item.outerHTML + '</li>'

并且无需添加额外的包装或内容，只需从outerHTML获取HTML即可完成！

Answer 3

$.each( $('.nav-container>a'), function(i, item){
        var menupunkt = '<li>' + $(item).text() + '</li>'
        console.log(i, menupunkt);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container desktop">
    <a href="_index.php?page=_sub_papa&main=klassen">One</a>
    <a href="_index.php?page=_sub_papa&main=tw">Twp</a>
</div>

Answer 4

我相信您想要访问outerHTML。我已经包含了另一个SO答案的代码：

jQuery, get html of a whole element

https://jsfiddle.net/86g44ssp/1/

我所做的改变是：

jQuery.fn.outerHTML = function() {
  return jQuery('<div />').append(this.eq(0).clone()).html();
};


... other code here ...

var menupunkt = '<li>' + $(item).outerHTML() + '</li>'

Answer 5

$( ".nav-container a" ).wrap( "<li></li>" );

这是在列表元素中包装 .nav-container a 的最快方法。

虽然循环$.each('.nav-container a', function(i,v) {});每个<a>都像对象不在TEXT

如果您想要使用目标特定元素：

$.each('.nav-container a', function(i,v) {
var fullObject = $(this).html(),
link = $(this).attr('href'),
text = $(this).text();
});

Answer 6

这是由类型转换引起的。执行'<li>' + item + '</li>'时，JavaScript运行时会尝试将item转换为字符串。这是在＃34;引擎盖下完成的。通过toString()上的item方法调用，例如item.toString()。您可以通过明确的方式执行强制类型转换：

console.log(i, item.toString());