Question

我有一个自动创建html和js（rmarkdown）的过程。

我想修改代码的内部html，从90到100。我有jquery加载所以我可以使用它。我的问题是，我要修改的标签范围没有ID。我怎样才能做到这一点？

<div id="equities" class="section level3">
    <h3>Equities</h3>
    <div class="knitr-options" data-fig-width="576" data-fig-height="460">

    </div>
    <span class="value-output" data-icon="fa-pencil" data-color="#01bb69">90</span>
</div>

Answer 1

对于父#id，class或attribute，您有多种方法可以做到这一点。在这种情况下，最快的方法是.class，最慢的方式是父#id。

您可以选择您认为更适合您的情况：

$(document).ready(function() {
   $('.value-output').text('100');
   $('[data-icon="fa-pencil"]').text('100');
   $('#equities span').text('100');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="equities" class="section level3">
    <h3>Equities</h3>
    <div class="knitr-options" data-fig-width="576" data-fig-height="460">

    </div>
    <span class="value-output" data-icon="fa-pencil" data-color="#01bb69">90</span>
</div>

Answer 2

$('[data-icon=fa-pencil].value-output').text('91')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="equities" class="section level3">
  <h3>Equities</h3>
  <div class="knitr-options" data-fig-width="576" data-fig-height="460">

  </div>
  <span class="value-output" data-icon="fa-pencil" data-color="#01bb69">90</span>
</div>

使用类似$('.value-output')
使用数据attr，如$('[data-icon=fa-pencil]')
使用类似$('[data-icon=fa-pencil].value-output')

Answer 3

试一下

$('[data-icon=fa-pencil]').text('Change Text');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="equities" class="section level3">
    <h3>Equities</h3>
    <div class="knitr-options" data-fig-width="576" data-fig-height="460">

    </div>
    <span class="value-output" data-icon="fa-pencil" data-color="#01bb69">90</span>
</div>

Answer 4

jQuery在选择https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

时使用querySelector逻辑

这也可以通过jQuerys find方法实现：https://api.jquery.com/find/

jQuery(document).ready(function() {
  if (confirm("switch it")) {
    jQuery("#equities .value-output").text(100);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="equities" class="section level3">
  <h3>Equities</h3>
  <div class="knitr-options" data-fig-width="576" data-fig-height="460">

  </div>
  <span class="value-output" data-icon="fa-pencil" data-color="#01bb69">90</span>
</div>

Answer 5

试试这个：

$(document).ready(function(){
  $('.value-output').html('100');
});

这样JQuery代码实际运行。

Answer 6

您的问题是90 to 100您有多个范围，您可以使用each()来迭代元素并根据需要更改其text()。

$('div#equities span.value-output').each(function(){
  $(this).text("New Added Text "+$(this).text());
});

$('div#equities span.value-output').each(function(){
  $(this).text("New Added Text "+$(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="equities" class="section level3">
  <h3>Equities</h3>
  <div class="knitr-options" data-fig-width="576" data-fig-height="460">

  </div>
  <span class="value-output" data-icon="fa-pencil" data-color="#01bb69">90</span>
  <br/>
  
  <span class="value-output" data-icon="fa-pencil" data-color="#01bb69">91</span>
  <br/>
  
  <span class="value-output" data-icon="fa-pencil" data-color="#01bb69">92</span>
  <br/>
</div>

Answer 7

 function findFirstDescendant(parent, tagname)
{
   parent = document.getElementById(parent);
   var descendants = parent.getElementsByTagName(tagname);
   if ( descendants.length )
      return descendants[0];
   return null;
}

var header = findFirstDescendant("equities", "span");

检查这是否适合你

Answer 8

只需使用JQuery find来实现功能，你可以试试吗

$( "#equities").find('span').text(100);

如何使用没有div Id的jquery修改内部HTML

8 个答案: