Question

所以我有两个类似的下拉菜单，我设法获得其内容的选择器（使用检查器项）。它们看起来像这样：

我希望第一个在条件满足时改变。现在他们两个都在变化，因为两者都有相同的类名。有关被检查元素的屏幕截图：

jQuery的：

$("span.filter-option.pull-left").text(polyline.profile);

但是这些span元素甚至不在我的html代码中，所以我无法改变他们的类或ID。那么我该怎样做才能获得我瞄准的特定下拉列表的选择器？

编辑：这是我的HTML：

<div id="fc">
            <div id="pr">
                <p id="label">Profile:</p>
                <select class="selectpicker" id ="myselect">
                    <option>trekking</option>
                    <option>fastbike</option>
                    <option>car-fast</option>
                    <option>shortest</option>
                    <option>moped</option>
                    <option>fastbike-lowtraffic</option>
                    <option>fastbike-asia-pacific</option>
                </select>
            </div>
            <div id="pr1">
                <p id="label1">Alternatives:</p>
                <select class="selectpicker" id ="alternativeidx">
                    <option>Original</option>
                    <option>First alternative</option>
                    <option>Second alternative</option>
                    <option>Third alternative</option>
                </select>
            </div>
            <button class="btn btn-primary btn-md" id="puttony" onClick="changeSelectedRoute()">Change</button>
        </div>

Answer 1

您可以尝试使用data-id属性：

$('button[data-id="myselect"]').find('span').text(value);

我猜这个ID是唯一的。

Answer 2

假设DOM中的位置始终相同，您可以使用 getElementsByTagName() 或 querySelectorAll() JavaScript方法：

＆＃13;

var sample1 = document.getElementsByTagName('span')[1];
var sample2 = document.querySelectorAll('span')[1];

console.log(sample1);
console.log(sample2);

＆＃13;

<span>One</span>
<span>Two</span>

＆＃13;

请注意，两者都会返回 NodeList 元素集合，因此您需要访问索引。如果您不确定索引是什么，则可以循环覆盖所有结果，并针对特定关键字检查 .innerHTML 之类的内容：< / p>

＆＃13;

var spans = document.getElementsByTagName('span');

for (var i = 0; i < spans.length; i++) {
  if (spans[i].innerHTML == 'Two') {
    console.log(spans[i]);
  }
}

＆＃13;

<span>One</span>
<span>Two</span>

＆＃13;

如果需要，也可以在jQuery中应用相同的原则：

＆＃13;

var spans = $('span');

for (var i = 0; i < spans.length; i++) {
  if ($(spans[i]).text() == 'Two') {
    console.log($(spans[i]).text());
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>One</span>
<span>Two</span>

＆＃13;

希望这有帮助！：）

区分两个<span>元素

2 个答案: