代码之家 › 专栏 › 技术社区 › DavidDunham

Jquery each through<a>仅为我提供href

each loops jquery javascript

DavidDunham · 技术社区 · 10 年前

我有一个简单的菜单

<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逐一循环,然后创建 <li> 带有完整标记的 <a.../a> .

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

6 回复 | 直到 10 年前

PeterKA 10 年前

item 或 this item.outerHTML -你要找的绳子-代替 项目 .

     $.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);
    });

Gregoire 10 年前

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

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

到

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

而且不需要添加额外的包装或内容,只需从外部HTML获取HTML即可!

user6748331 user6748331 10 年前

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

Community Mohan Dere 9 年前

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

anddoutoi 10 年前

这是由于 类型转换 .当你这样做时 '<li>' + item + '</li>' JavaScript运行库将尝试转换 item 到字符串。这是“在引擎盖下”通过呼叫 toString() 方法 项目 ,例如。 item.toString() .你可以强迫 类型转换 通过明确的方式:

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

Beneris 10 年前

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

这是最快的包装方式 .nav容器a 列表元素内部。

循环时 $.each('.nav-container a', function(i,v) {}); 每个 <a> 不在文本处

如果要使用特定于目标的元素,请使用:

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