通过 <a> 的 Jquery 只给我href答案

【问题标题】：Jquery each through <a> gives me href only通过 <a> 的 Jquery 只给我href
【发布时间】：2016-08-30 14:01:05
【问题描述】：

我有一个简单的菜单

<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>

我用 jQuery 循环遍历这个，然后用完整的 <a.../a> 创建 <li> 标签。

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

示例：http://codepen.io/anon/pen/bwbgap、https://jsfiddle.net/86g44ssp/

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

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

为什么我没有得到整个 a？因为当我只打印“项目”时，我得到了整个 <a.../a>

【问题讨论】：

$('#replacemenu') 是什么？
console.log 只接收href，因为这是锚元素上HTMLElement#toString 的返回值

标签： javascript jquery loops each

【解决方案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);
    });

【讨论】：

【解决方案2】：

我已经更新your fiddle，你只需要改变

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

到

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

并且不需要添加额外的包装或其他东西，只需从 outerHTML 中获取 HTML 就可以了！

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>'

【讨论】：

【解决方案5】：

这是由类型转换引起的。当您执行'<li>' + item + '</li>' 时，JavaScript 运行时将尝试将item 转换为字符串。这是通过在 item 上调用 toString() 方法“在后台”完成的，例如item.toString()。您可以通过显式进行强制类型转换：

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

【讨论】：

【解决方案6】：

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

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

在循环 $.each('.nav-container a', function(i,v) {}); 时，每个 <a> 就像对象 NOT at TEXT

如果您想针对特定元素使用：

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

【讨论】：

这不是答案，因为您在没有任何上下文的情况下提出了一些建议。这应该是一条评论。