Question

假设我的代码中有这一行：

<ul id="mobileBtnsBot">
            <li>
                <a href="/m/alert/index.shtml"><span class="alertsBtn"></span><span class="btnText">Alerts & Advisories</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="schedBtn"></span><span class="btnText">Schedules</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="mapsBtn"></span><span class="btnText">Maps & Stations</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="trainBtn"></span><span class="btnText">TrainView</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="ntaBtn"></span><span class="btnText">Next To Arrive</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="faresBtn"></span><span class="btnText">Fares</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="mediaBtn"></span><span class="btnText">@ SEPTA</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="button_beg"></span><span class="btnText">Find my Location</span></a><div class="button_last"></div>
            </li>
        </ul>

我想使用JavaScript查找包含文本<a>的{{1}}，并根据您的用户代理隐藏它。

我知道您不应该使用用户代理，但我不能使用任何服务器端语言。

如果有人知道如何做到这一点或有更好的想法，请分享。

编辑：此页面是在Alfresco CMS中的Web表单中创建的。如果我给它一个ID，他们都会得到ID。

isBrowser.js

Find my location

移动的script.js

if (navigator.userAgent.indexOf('Gecko')!= -1
         || navigator.userAgent.indexOf('MSIE')!= -1 || navigator.userAgent.indexOf('Opera')!= -1 || navigator.userAgent.indexOf('Chrome')!= -1) {
    document.write('<link rel="stylesheet" href="/m/css/smartmobile.css" type="text/css" />');
}
else if (navigator.userAgent.indexOf('webkit')!= -1) {
    document.write('<link rel="stylesheet" href="/m/css/smartmobile.css" type="text/css" />');
}
else{
  alert("load mobile css");
  document.write('<link rel="stylesheet" href="/m/css/mobile.css" type="text/css" />');
    function hideListItem(text)
    {
        var ul = document.getElementById("mobileBtnsBot");
        alert("line1");
        for(var i = 0; i < ul.childNodes.length; i++)
        {
          alert("line2-loop");
            var li = ul.childNodes[i];
    alert("line3-loop");
            // Element node.
            if (li.nodeType == 1)
            {
              alert("line4-loop");
                // Find the text in all of the inner-html.
                if (li.innerHTML.indexOf(text) != -1)
                {
                  alert("line5-loop");
                    li.style.display = "none";
                    break;
                }
                alert("line6-loop");
            }
            alert("line7-loop");
        }
        alert("line8");
    }
     hideListItem("Find my Location");
}

Answer 1

这是一个不错的短片。

function findLink (text) {
  var i=-1, v, r=[];
  while (v=document.links[++i]) if ((''+v.innerHTML).match(text)) r.push(v);
  return r;
}

它将转换包含<a>的所有text元素的数组。 text可以是普通字符串或正则表达式。

这是一个带有可选回调函数的版本。它将在所有匹配的链接上调用。函数的第一个（也是唯一的）参数是<a>元素。您可以从回调中返回false以停止查找链接。

function findLink (text, callback) {
  var i=-1, v, r=[], cb=callback||new Function;
  while (v=document.links[++i]) if ((''+v.innerHTML).match(text)) {
    r.push(v); 
    if (cb(v)===false) return r;
  }
  return r;
}

所以，根据使用者隐藏链接听起来像是一个坏主意，但如果你已经死了，你可以做这样的事情（如果我正确地读你的问题）：

if ((''+navigator.userAgent).match(/BlackBerry|Android|iPhone/)) {
  document.body.innerHTML+='<link rel="stylesheet" href="/m/css/mobile.css" type="text/css" />';
  findLink('Find my Location', function (link) { 
    link.style.display='none'; 
    return false;
  });
}

Answer 2

相当简单，虽然效率不高。此函数将隐藏其中包含p_text的任何锚点。只需致电hide('Find my Location')即可完成您想要的任务。

var hide = function(p_text, p_elem)
{
    var elem = (p_elem) ? p_elem : document,
        anchors = elem.getElementsByTagName('a'), i = 0;

    for (i = 0; i < anchors.length; i++)
    {
        if (anchors[i].innerHTML.indexOf(p_text) >= 0)
        {
            anchors[i].style.display = 'none';
        }
    }
}

对于用户代理，功能检测是可行的方法，但如果您不是浏览器检测使用不同的功能，您可能必须实际嗅探UA。特征检测很棒。它确实是。当您使用正在检测的功能时。但是用户代理嗅探有它的位置，这可能就是其中之一。

[等待火焰]

编辑：添加了可选的“p_elem”参数。如果您有容器元素，则只能通过调用hide('Find my Location', containerElement)来搜索该元素，其中containerElement是DOM节点。

Answer 3

编辑：

$("#mobileBtns > li:has(span:contains(TrainView))").hide();

将TrainView更改为您要搜索的任何文字。这会选择li下mobileBtns元素，其中span包含文本TrainView。如果你想要一个非jquery解决方案，请告诉我。

function isBrowser(browserName)
{
  var userAgent = navigator.userAgent;

  for(var i = 0; i < browserName.length; i++)
  {
      if(userAgent.indexOf(browserName[i]) != -1)
      {
          return true;
      }
  }

  return false;
}

if(isBrowser(["BlackBerry"]))
{
   document.write('<link rel="stylesheet" href="/m/css/mobile.css" type="text/css" />');
}
else if(isBrowser(["iPhone", "Android", "Gecko", "MSIE", "Chrome", "Opera"]))
{
  document.write('<link rel="stylesheet" href="/m/css/smartmobile.css" type="text/css" />');
}
else
{
  document.write('<link rel="stylesheet" href="/m/css/mobile.css" type="text/css" />');
}

编辑：您需要在文档加载后包装$(...)代码，如下所示：

$(document).ready(function ()
{
    $("#mobileBtns > li:has(span:contains(TrainView))").hide();
});

编辑2 ：这是一个不使用jQuery查找/隐藏列表项的javascript函数。用以下代码替换$(document).read()...：

function hideListItem(text)
{
    var ul = document.getElementById("mobileBtns");

    for(var i = 0; i < ul.childNodes.length; i++)
    {
        var li = ul.childNodes[i];

        // Element node.
        if (li.nodeType == 1)
        {
            // Find the text in all of the inner-html.
            if (li.innerHTML.indexOf(text) != -1)
            {
                li.style.display = "none";
                break;
            }
        }
    }

}

window.onload = function (e)
{
    hideListItem("Schedules");
};

编辑3 ：好的，我认为浏览器的window.onload isn't supported in your version。您可以做的是将hideListItem()代码的JavaScript调用移至body标记的结尾：

<html>
<head>
<!-- put your hideListItem function declaration here -->
</head>
<body>

<!--...stuff here...-->

<script type="text/javascript">
hideListItem("Schedules");
</script>

</body>
</html>

Answer 4

为什么使用用户代理而不仅仅是功能检测？

我认为您正在寻找客户端的地理位置功能，所以为什么不直接检查：

function isGeolocationSupported() {
    return !!navigator.geolocation;
}

请参阅GeoLocation API spec和HTML5 site以及更多示例。

另外，我不会为这个功能添加jQuery，因为即使24K对于移动设备来说也是如此。您可以使用Selectors API使用以下方法查询span元素内的文本：

var links = document.querySelectorAll("a.main");

for(var i = 0; i <links.length; i++) {
    var link = links[i];
    var span = link.querySelector('span');
    var text = span.firstChild.nodeValue;
    if(text == 'Find my Location') {
        link.style.visibility = 'hidden';
    }
}

如果没有Selectors API，这里也是如此。

var canQueryByClass = 'getElementsByClassName' in document;
var canQueryByTag = 'getElementsByTagName' in document;

if(!(canQueryByClass && canQueryByTag)) {
    // hopeless client, no need to check further.
}

var links = document.getElementsByClassName("main");

for(var i = 0; i <links.length; i++) {
    var link = links[i];
    var span = link.getElementsByTagName('span');
    if(span.length) {
        var text = span.firstChild.nodeValue;
        if(text == 'Find my Location') {
            link.style.visibility = 'hidden';
        }
    }
}

See a working example。

Answer 5

如果你可以这样做的话，不要分配额外费用：

 var spans = document.getElementsByTagName('span');
 for(i = 0; i < spans.length; i++)
    if(spans[i].innerText == 'Find my location')
    {
     var aElement = spans[i];
        while(aElement.tagName != 'a')
      aElement = aElement.parentElement;

     aElement.style.display = 'none';
    }

这是纯粹的JS解决方案，用文本搜索范围，然后跟进直到找到链接元素并隐藏它。

Answer 6

至于<a>，您可以使用jQuery轻松完成此任务：

$(".main").hide();

~~但是您还有另一个问题：您无法从JavaScript访问用户代理。您将不得不求助于服务器端脚本 - 并且由于您的问题提到您不能，因此您不能隐藏<a>。~~

修改：为<a>提供唯一ID，例如：

<a id='user_agent_thing' ...

然后你可以使用：

$("#user_agent_thing").hide();

进一步编辑：您可以通过以下方式找到特定元素：

var span_element = $('span').filter(function() { return $(this).text() == 'Find my Location'; });

然后你可以通过以下方式隐藏整个事情：

span_element.parent().parent().parent().hide();

Answer 7

对于新HTML：

$('#mobileBtns li:contains(Find my Location)').hide();

对于旧的HTML：

这个jQuery片段应该可以解决问题（test）：

$('.main:has(.button_bg > span:contains(Find my Location))').hide();

执行可能想要的事情，这是针对i18n（test）的防范：

$('a.main[href$=media/findmy]').hide();

最后一个示例显示您可以使用CSS3执行隐藏：

a.main[href$=media/findmy] {
    display: none;
}

JavaScript |抓取内部HTML文本

7 个答案: