如何使用javascript/jquery中的某个类选择HTML页面上的所有角度字段

我正在尝试使用 Angular 服务器端代码格式化站点 HTML 中的字段。 我想在HTML页面上编写一个javascript/jquery脚本，以将字段从小数格式化为分数。 我有javascript代码来执行转换。 我无法工作的是选择页面上的每个文本元素。 我要更改的每个元素都有成分量类。 但是，当我使用该类选择元素时，我没有得到任何结果。 有人可以帮助我吗？

首先介绍一些背景知识，因为它将解释为什么我不只在控制器中进行更改。 我的公司收到了一个托管在Azure上的Angular JS应用程序。 控制器都是 Angular JS。 我们有服务器端源代码，但它被编译成一个 dll，然后将该 dll 放在 Azure 上。 目前，我们没有客户端的权限将更改发布到 dll。 因此，我们坚持编辑HTML页面（该页面在Azure上，但在dll之外）。 我需要找到页面上的所有小数字段并将它们转换为分数。 正如我所说，我有一个脚本来进行转换，但我不知道如何访问每个元素。

字段的创建方式如下：

                    <table class="component-ingredients-container">
                    <tr ng-repeat-start="component in currentRecipe.Components"
                        ng-show="component.Name">
                        <td>&nbsp;</td>
                        <td class="component-name-cell">
                            <span class="component-name">{{component.Name}}</span>
                        </td>
                    </tr>
                    <tr ng-repeat-end ng-repeat="ingredient in component.Ingredients">
                        <td>
                            <span class="ingredient-amount">{{ingredient.Amount}}</span>
                            <span class="ingredient-unit">{{ingredient.Unit}}</span>
                            <span>{{ingredient.Lookup.Name}}</span>
                            <div class="ingredient-preparation" ng-show="ingredient.Preparation">
                                <span>{{ingredient.Preparation }}</span>
                            </div>
                        </td>
                    </tr>
                </table>

结果是这样的：

酱

2.5杯西红柿

.5 汤匙香料

.125盎司其他东西

我想获取这些数字（2.5、.5 和 .125），以便将它们传递给我的转换脚本。

我的第一次尝试是使用 jquery，但我收到一个错误，说 $ 未定义（我尝试用 jquery 代替 $，结果相似）。 我还尝试添加带有指向 jquery 代码的链接的脚本标签，但没有成功。

        $(document).ready(function () {
        try
        {
            $('.ingredient-amount').each(function (ndx) {
                var org = $(this).text();
                console.log("Object:" + org);
            });
        }
        catch (ex)
        {
            console.log("Error:" + ex);
        }
    });

我的结论是 Angular 或其他一些代码导致了冲突。

我尝试用javascript编写查询，它似乎只找到了.ingredient-amount类的一个实例

    function r(f){/in/.test(document.readyState)?setTimeout(r,9,f):f()}
r(function () {
    try {
        var divs = document.querySelectorAll('.ingredient-amount');
        [].forEach.call(divs, function (div) {
            try {
                console.log("Inside");
                console.log(divs.text());
            }
            catch (ex) {
                console.log(ex);
            }
        });
    }
    catch (ex) {
        console.log(ex);
    }
});

接下来我尝试了一些不同的东西。 我在 span 标签中添加了一个 ID，并尝试查找该特定 ID。 但是，找不到它。 结果我得到了一个空。

<span class="ingredient-amount" id="amount-{{$index}}">{{ingredient.Amount}}</span>
    function r(f) { /in/.test(document.readyState) ? setTimeout(r, 9, f) : f() }
r(function () {
    console.log("Ready");
    var div = document.getElementById('amount-0');
    console.log("Element: " + div);
    console.log("Got it!");
});

我的结论是我没有正确选择这些角度场。 我该怎么做？

更新：

我能够添加一个按钮并使其工作。 但是，我无法让任何类型的就绪功能正常工作。 我已经尝试了 （1.） jquery 文档准备就绪;jquery不起作用，所以这是一个破产，（2）。最短的就绪，绑定就绪，以及此处的其他几个：$（document）.ready 等效物，没有 jQuery （3.）只需将函数外部的代码作为脚本标记的最后一部分。

如何在页面打开时使此代码正常工作，而不必单击按钮？

<button id='btnConvertToFractions' onclick="buttonConvert()">Convert to Fractions</button>

function buttonConvert()
{
    try
    {
        console.log("Convert started");
        var divs = document.querySelectorAll('.ingredient-amount');
        [].forEach.call(divs, function (div) {
            console.log("Before: " + div.textContent);
            div.textContent = Fraction(div.textContent);
            console.log("After: " + div.textContent);
        });
        console.log("Convert finished");
    }
    catch (ex)
    {
        console.log("Error: " + ex);
    }
};