使用 jquery 更改 html <em> 标记内的文本

Question

我只想更改标签内匹配的确切单词，而不是所有标签。 onload 是最好的方法吗？我尝试在 php 中使用 str_repace，但由于某种原因，它在一个页面上工作，但在我需要它工作的页面上却没有。

<?php 
     $var = "<em>Bicycle</em>";
     echo str_replace($var, "Bicycle", "(something different)");
    ?>

现在我已经尝试了一些不同的 html dom 方法和一些 javascript。

  <em>Bicycle</em>

<script>
document.getElementsByTagName("em").innerHTML = "(something different)";
</script>

---

<?php foreach ($this->components as $id => $comp): ?>
        <tr class="row">
            <td class="col1">
                <img src="<?php echo $this->baseUrl('images/' . $comp->img_src) ?>"
                     alt="<?php echo $this->translate(sprintf($comp->translation_key, 'name')) ?>">
            </td>
            <td class="col2">
                <?php echo $this->translate(sprintf($comp->translation_key, 'name')) ?>
                <em><?php echo $this->translate(sprintf($comp->translation_key, 'description')) ?></em>
            </td>
            <td class="col3">
                <?php echo $this->formCheckbox(
                    "insurance[$id]", '1', !empty($this->order['insurance'][$id]), array('class' => 'row-checkbox')
                ) ?>
                <label for="checkbox"><?php echo $this->translate(
                        'order_additional_insurance_checkbox_label'
                    ) ?></label>
            </td>
            <td class="col4"><?php echo $this->translate(sprintf($comp->translation_key, 'dimensions_metric')) ?>
                <em><?php echo $this->translate(sprintf($comp->translation_key, 'dimensions_customary')) ?></em>
            </td>
            <td class="col5">
                <span class="rent">$<?php echo $comp->price ?></span>
            </td>
            <td class="col6">
                <div class="field-holder counter-holder row-qty" data-max-val="99">
                    <?php echo $this->formText(
                        "components[{$id}][quantity]",
                        (int)$this->order['components'][$id]['quantity'],
                        array(
                            'class' => 'required-aggregate-quantity',
                            'id'    => "component_{$id}_quantity"
                        )
                    ) ?>
                    <a class="btn-top" href="#">top</a>
                    <a class="btn-bottom" href="#">bottom</a>
                </div>
            </td>
            <td class="col7">
                <?php
                $rowCost = (int)$this->order['components'][$id]['quantity'] * $comp->price;
                ?>
                <span class="cost">$<?php echo number_format($rowCost, 2) ?></span>
            </td>
        </tr>
    <?php endforeach; ?>

专注于翻译键“名称”。

Answer 1

虽然您指定了 jQuery，但您可以使用 JavaScript 来执行此操作，但是您使用 getElementsByTagName 错误。

getElementsByTagName返回一个数组，你必须指定数组中的哪一个需要编辑。该演示应该为您提供足够的信息。

您没有指定数组中的哪一个需要更改 (document.getElementsByTagName("em").innerHTML)，因此没有任何更改。

<em>Hello</em>
<em>Hello</em>
<em>Hello</em>
<em>Hello</em>
<em>Hello</em>
<em>Hello</em>

document.getElementsByTagName("em")[0].innerHTML = "GAH!";

会回来

GAH! Hello Hello Hello Hello Hello

http://jsfiddle.net/0jqvn9v2/

Answer 2

您可以使用带有回调函数的 html() 来迭代它们。替换文本使用replace() 方法

$('em').html(function(i, v) {
  return v.replace("Bicycle", "(something different)");
});

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

如果内容是具体的，那么，

$('em').html(function(i, v) {
  return v === "Bicycle" ? "(something different)": v;
});

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