仅使用文本定位最后一级元素

Question

我正在尝试将tabindex="0"应用于一堆元素：

• 有文字
• 还没有tabindex。

这是我的代码：

$(elems).not("[disabled]").each(function() {
    let n = $(this).attr('tabindex');
    if ((typeof n == typeof undefined || n == !1) && ($(this).text().trim().length)) {
        $(this).attr('tabindex', '0')
    }
});

用户是盲人，用TAB浏览页面，用声乐合成读取文本。

1＃这个案子没问题

    <div>Example text</div>
--> <div tabindex="0">Example text</div>

2＃这个案例有问题（首先关注div然后关注p所以“示例文本”阅读两次）

    <div>
        <p>Example text</p>
    </div>

--> <div tabindex="0">
        <p tabindex="0">Example text</p>
    </div>

2＃这种情况更成问题（“第一文本第二文本”再读“第二文本”）

<div tabindex="0">First text
    <p tabindex="0">Second text</p>
</div>

我希望首先读取“第一个文本”，然后“第二个文本”。

我有很多解决方案，但沉重和无助。如果你有一个简单的，提前谢谢你！

基本上，我只想在带有文本的TAG上应用tabindex，除非它的文本格式选项卡（b，i，u，strong ...）。例：

<div>
  <p tabindex="0">This is <b>great</b> !</p>
</div>

Answer 1

从我能看到你的问题，听起来主要问题是jQuery的text()函数在元素具有子元素的情况下返回太多文本。您特别希望能够在以下示例中选择与“bar”分开的“f​​oo”和“baz”：

<div>foo<p>bar</p>baz</div>

如果是这种情况，那么你需要停止使用“元素”并开始使用Nodes。节点更细粒度，让您更深入地了解DOM的实际外观。例如，上面将大致解析以下节点树：

element: div
    text: "foo"
    element: p
        text: "bar"
    text: "baz"

节点更难以使用，因为有更多不同类型的节点具有不同的功能。但是，当您需要更多控制时，这通常需要承担成本。

以下是如何实现目标的一个示例，但您可能需要根据自己的具体需求进行调整。

var root = document.getElementById('root');

processChildNodes( root );

// Log the resulting HTML to the console
// so that we can see the tab index attribute:
console.log( root.innerHTML );

function processChildNodes(parent){
  var child;
  // Get either the first child of the parent or the next sibling of
  // the current child.
  // If we don't have any children or we run out of siblings, then
  // we're done here.
  while ( child = child ? child.nextSibling : parent.firstChild ){
    // If the node is disabled, then skip it.
    // Maybe this should be data-disabled?
    switch (child.nodeType){
      case Node.ELEMENT_NODE:
        // If the current node is an element, then set the tabIndex
        // and process the children.
        if ( !child.hasAttribute('disabled') ){
          child.setAttribute( 'tabindex',  '0' );
          processChildNodes( child );
        }
        break;
      case Node.TEXT_NODE:
        // If the current node is text, then "read" the text.
        // You don't have an example of how this is supposed to work,
        // so I'll just print it to the console.
        var text = (child.nodeValue || "").trim();
        if (text.length > 0) console.log( 'reading: ' + text );
        break;
    }
  }
}

<div id="root">
  <div>Example text 1</div>

  <div>
    <p>Example text 2</p>
  </div>

  <div>
      First text
      <p>Second text</p>
      Third text
      <p>
        Fourth text
        <span>Fifth text</span>
      </p>
      <p disabled>
        Skip this one.
      </p>
  </div>
</div>