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

使用.html()获取单个元素

html jquery

Reece · 技术社区 · 8 年前

<a></a> 只有在所有 .chosen 元素。我该怎么做?

$('.chosen').each(function(){
  var cur = $(this).html();
  encodeURIComponent(cur);
  $('#custom_crumb').append(cur);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="chosen" style="display: none;">
  <a rel="nofollow" href="http://website.co.uk/shop/?filter_colour=amber">Amber</a>
  
  <span class="count">(14)</span>
</li>

<div id="custom_crumb"></div>

8 回复 | 直到 6 年前

T.J. Crowder 8 年前

如果你想 内部的

var cur = $(this).find("a").html();

如果你想它的HTML,然后:

var cur = $(this).find("a").prop("outerHTML");

现场例子 outerHTML

$('.chosen').each(function(){
  var cur = $(this).find("a").prop("outerHTML");
  $('#custom_crumb').append(cur);
});

<ul>
  <li class="chosen" style="display: none;">
    <a rel="nofollow" href="http://website.co.uk/shop/?filter_colour=amber">Amber</a>

    <span class="count">(14)</span>
  </li>
</ul>

<div id="custom_crumb"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

注意,我删除了 encodeURIComponent(cur); 行,因为您没有使用返回值,所以它不会执行任何操作。如果你出于某种原因想要它(这看起来是件奇怪的事情),把它加回去,但是 cur = encodeURIComponent(cur); .

Saud Qureshi 8 年前

使用.first()。

$('.chosen > a').first()

:它将返回元素本身,并使用.html()获取内容(html)。它将选择第一个锚定标记。

Ali Imran 8 年前

您需要在中指定元素

在这个li中,它有两个元素span和a。对于特定的元素,您需要告诉jquery我只需要一个元素

$(this).find('a').html()

$('.chosen').each(function() {
  var cur = $(this).find('a').eq(0).html();
  $('#custom_crumb').append(cur);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="chosen" style="display: none;">
  <a rel="nofollow" href="http://website.co.uk/shop/?filter_colour=amber">Amber</a>

  <span class="count">(14)</span>
</li>

<div id="custom_crumb"></div>

Amit Kumar 8 年前

你需要找到 a 先贴标签。

$('.chosen').each(function(){
  var cur = $(this).find('a').html();
  encodeURIComponent(cur);
  $('#custom_crumb').append(cur);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="chosen" style="display: none;">
  <a rel="nofollow" href="http://website.co.uk/shop/?filter_colour=amber">Amber</a>
  
  <span class="count">(14)</span>
</li>
</ul>

<div id="custom_crumb"></div>

ADyson 8 年前

a 直接在选择器中的元素:

$('.chosen a').each(function(){
  var cur = $(this).html();
  $('#custom_crumb').append(cur);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="chosen" style="display: none;">
  <a rel="nofollow" href="http://website.co.uk/shop/?filter_colour=amber">Amber</a>
  
  <span class="count">(14)</span>
</li>

<div id="custom_crumb"></div>

DarknessZX 8 年前

你可以用 $('.chosen a') chosen

$('.chosen a').each(function(){
  var cur = $(this).html();
  encodeURIComponent(cur);
  $('#custom_crumb').append(cur);
});

Alex 8 年前

所有的答案都忽略了一个事实 .html() 显然是你想做的事情的错误功能。

您可以选择锚标记并将其附加到某个位置,也可以克隆它。这两种方法都比读取和重新解析html更有效:

var crumb = $('#custom_crumb');

$('.chosen').each(function(){
  var anchor = $(this).find('a').first();

  crumb.append(anchor);

  // or, to keep the a in the <li>

  crumb.append(anchor.clone());
});